开发者

jQuery UI autocomplete returning [object Object] instead of value for Google like redirect

开发者 https://www.devze.com 2023-01-23 06:50 出处:网络
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 s

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 pro开发者_C百科blem 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.


Try this in your select function:

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

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号