jQuery 自动完成/预测 - 像谷歌
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8850399/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Autocomplete/predict - like google
提问by Coops
I am looking to create a search feature similar to google using jQuery. however, I am unsure of the name of one of its features.
我正在寻找使用 jQuery 创建类似于 google 的搜索功能。但是，我不确定其功能之一的名称。
The feature in question is the text prediction element.
有问题的特征是文本预测元素。
eg. if I type jquery it shows in the input box "Jquery" as my input but then in grey it adds the text of the first result in the input box and allows the user to select this "predictive value"
例如。如果我输入 jquery，它会在输入框中显示“Jquery”作为我的输入，但它会在输入框中添加第一个结果的文本并允许用户选择这个“预测值”
I have searched high and low for the name of this functionality and a working example.
我已经对这个功能的名称和一个工作示例进行了高低搜索。
any help would be greatly appreciated
任何帮助将不胜感激
回答by Shyju
You are looking for an auto complete feature. jQuery UI has an awesome autocomplete feature included in it.
您正在寻找自动完成功能。jQuery UI 包含一个很棒的自动完成功能。
http://jqueryui.com/demos/autocomplete/
http://jqueryui.com/demos/autocomplete/
The result of your search you can get from an array or a database table (thru a server page).It is quite simple to set up as below
您可以从数组或数据库表（通过服务器页面）中获取搜索结果。如下设置非常简单
The below example is using an array as data source for the auto suggest items.
以下示例使用数组作为自动建议项目的数据源。
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
The above code binds the textbox with id "tags" to the autocomplete function. we mentioned the source value as the name of our array where we stored different programming language names.
上面的代码将 id 为“tags”的文本框绑定到自动完成功能。我们提到源值是我们存储不同编程语言名称的数组的名称。
Mostly, you may need to get data from a database, then you use an intermediate server page as datasource. this server page will get data from the data access layer and give you the result.
大多数情况下，您可能需要从数据库中获取数据，然后使用中间服务器页面作为数据源。此服务器页面将从数据访问层获取数据并为您提供结果。
$( "#tags" ).autocomplete({
source: "searchtags.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
回答by JuSchz
What you are looking is autocomplete plugin. There are a several, but the 'official one' is this jquery autocomplete : http://docs.jquery.com/Plugins/Autocompleteand the code :
您正在寻找的是自动完成插件。有几个，但“官方的”是这个 jquery 自动完成：http: //docs.jquery.com/Plugins/Autocomplete和代码：
$("#example").autocomplete(data);
