JQuery 自动完成表单提交

Question

I have managed to implement the jQuery autocomplete plugin on my website but was wondering if it is possible to make the form auto-submit once the user selects an item from the search. I have the following set-up:

HTML Form:

<form class="quick_search" action="../include/search.php" method="post">
    <input type="text" name="search" id="search" value="Search...">
</form>

JavaScript:

$().ready(function() {
    $("#search").autocomplete("../include/search.php", {
        width: 350,
        selectFirst: false
    });
});

I have also included the jQuery and Autoplugin scripts. The search.php file contains a list of the search options.

At the moment, the search works correctly and I just need it to submit the form once an item is selected from the list that appears. I tried to use the onClick and onSelect options within the search field but neither of these worked correctly.

Any help would be much appreciated (I don't really understand js)! Thanks.

Answer 1

Just found out you CAN use select but not on ui.item but on ui.item.value

$(document).ready(function() {
    $(function() {
        $("#search_box").autocomplete({
            source: ['Google', 'Yahoo', 'StackOverflow'],
            select: function(event, ui) {
                $(event.target).val(ui.item.value);
                $('#search_form').submit();
                return false;
            },
            minLength: 1
        });
    });
});​

See this fiddle http://jsfiddle.net/uXHCQ/

Thanks to @tim peterson for jQuery-UI Autocomplete submitting form onclick of item from dropdown list