如何使用jQuery UI自动完成插件进行搜索? [英] How to use the jQuery UI Autocomplete plug-in to search?

问题描述

我正在尝试使用jQuery UI自动完成插件创建类似于Google的网站搜索.

有人搜索自动完成功能会帮助搜索.该部分正在我的网站上运行(图像): http://www.advancedifx.com/

问题是，如果单击下拉选项，则在我选择的图像示例中:搜索引擎优化，但是单击所要做的只是将文本放入搜索框中，然后必须按Enter键.我需要获取有关选择以执行搜索的帮助.

请注意，我的Java技能是新手，我花了三天的时间才能达到目标.如果您认为可以提供帮助，请告诉我确切的地方和需要修改的地方.

预先感谢

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

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

});

解决方案

查看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();
  }
});

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

});

解决方案

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

这篇关于如何使用jQuery UI自动完成插件进行搜索?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！