如何进行AJAX搜索

Question

I'm trying to make an AJAX search for a website.

HTML:

<form id="search" method="post" action="search.php">
    <input type="text" name="search" />
    <input type="image" name="submit" alt="search" src="images/buttons/search.gif" />
</form>

$(function() {
    var search_text = '';
    $('form#search input[name=submit]').click(function() {
        search_text = $('form#search input[name=search]').val();
        $.get('../search.php',{ s: search_text });
        return false;
    });
});

In the search.php file I have the following:

<?php
    $search = $_GET['s'];
    if (isset($_POST['submit_x'])) {            
        $search = $_POST['search'];
        $search = str_replace(' ','',$search);
        $search = strtolower($search);

        if($search == 'kingbabychosenheart' || $search == 'chosenheart' || $search == 'beltchosenheart') {
            echo "<meta http-equiv='refresh' content='0;url=chosen_heart.php'>";
        } else {
            echo "<meta http-equiv='refresh' content='0;url=not_found.php'>";
        }       
    }       
?>

But this doesn't work. What else do I have to do to make this work?

Thanks

Answer 1

Well, first of, your form will not be usable with Javascript disabled. I hope you know that, since your form has no submit element per se.

With that in mind, you should use the submit() event and attach it to the form, then trigger that event when the image is clicked.

$(function() {
    var search_text = '';
    $('#search').bind('submit',function() {
        search_text = $('input[name=search]', $(this)).val();
        $.get('../search.php',{ s: search_text });
        return false;
    });

    $('#search img[name="submit"]').click(
        $('#search').trigger('submit');
    });
});

Or better still, use the jquery form plugin.