How to use the jQuery UI Autocomplete plug-in to search?

问题

I'm trying to create a site search similar to Google using the jQuery UI Autocomplete plug-in.

When somebody searches the autocomplete assists the search. That part is working (image) on my site: http://www.advancedifx.com/

The problem is, if you click on a drop down selection, in my image example I selected: Search Engine Optimization, but all that a click does is put the text into the search box, and then you have to hit enter. I need help with getting the selection to perform a search.

Please note that my Javascript skills are beginner lever and it took me three days to get this far. If you think you can help please show me exactly where and what I need to modify.

Thanks in advance

$(function() {
var availableTags = [
  "SEO",
  "Responsive Design",
  "Google Local",
  "Twitter",
  "Social Media",
  "Web Design",

];
$( ".search_box" ).autocomplete({
  source: availableTags
});

});

回答1:

Looking at the api: http://api.jqueryui.com/autocomplete/#event-select

You have access to the select event.

$( ".search_box" ).autocomplete({
  source: availableTags,
  select: function( event, ui ) {
    console.log(ui); // you can see output of this in your dev console

    var searchTerm = ui.item; // pretty sure item will give you what you want

    // you can then trigger your button click or form submit (whatever you're doing)
    // passing along the searchTerm

   $('.top_bar_search').find('form').submit();
  }
});

来源：https://stackoverflow.com/questions/17051229/how-to-use-the-jquery-ui-autocomplete-plug-in-to-search

标签

jquery

user-interface

jquery-ui-autocomplete