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

Question

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
});

});

Answer 1

查看api：http ://api.jqueryui.com/autocomplete/#event-select

您有权访问该select事件。

$( ".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();
  }
});