Question

I am trying to install the jQuery UI autocomplete on my website. I have it up and working but I want it to automatically submit the search form when someone clicks on an option. The default behavior seems to be that it just fills out the form with the selected item and then the user must click the submit button. I want it to just automatically redirect like Google. I’m running PHP 5.+ and MYSQL 5+ and jquery.1.4.2 and jqueryui.1.8.6.

Here is the javascript:

<script>
$(function() {
    $( "#query" ).autocomplete({
        source: "/scripts/autocomplete_handler.php",
        minLength: 2,
        select: function(event, ui) {
                    $('#query').val(ui.item);
                  $("#results").text(ui.item); // for testing purposes
                    $('#search_form').submit();
                }

    });
});
</script>

Here is the form:

<form name="search_form" id="search_form" action="search.php" method="get">    
  <input type="text" name="query" id="query" />
  <input type="submit" value="Search" />
</form>
<code id="results"></code>

As you can see, I am trying to change the value of the input field “query” using $(‘#query’).val(ui.item). The problem is that when I select an autocomplete option $_GET[‘query’] becomes [object Object]. i.e. My website searches for the string “[object Object]” instead of the value that I clicked.

At the bottom of the form there is a code tag with id “results”. I also can’t get this to populate with the text(ui.item). If anyone could help it would be much appreciated, I’m sure I’m not the only one who wants this type of Google like functionality in their autocomplete, but I can’t find any examples anywhere.

Answer 1

Try this in your select function:

$('#query').val(ui.item.value);