jQuery autosuggest示例

我需要在我们的网站上实现“自动提示”function，但它需要在一定数量的键之后重新查询每次键击（就像2之后的每个字符需要再次查询）。 所以结果不是限制性搜索。 例如，我见过的自动完成插件的工作方式如下：

[寻找一个县] 1.客户类型’CA’和第一个结果将返回’加拿大’，’柬埔寨’和’Camaroon’2.客户继续输入并点击’M’新的结果将在唯一的内部查询现有的3个结果（产生’柬埔寨’和’Camaroon’的结果）

我需要一个解决方案，相当于在每次击键时查询我的数据源。 我已经有了ajax调用，它将根据“typed”参数返回我的结果。 例如（在上面的示例中），它需要首先传递’ca’的ajax调用，如果客户继续键入3个字符上传递’can’，依此类推。

谢谢。

Answer 1

jQuery UI自动完成插件将执行您想要的操作。

请参阅此演示http://jqueryui.com/demos/autocomplete/#remote-jsonp

演示代码：

$("#city").autocomplete({ source: function(request, response) { $.ajax({ url: "http://ws.geonames.org/searchJSON", dataType: "jsonp", data: { featureClass: "P", style: "full", maxRows: 12, name_startsWith: request.term }, success: function(data) { response($.map(data.geonames, function(item) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })) } }) }, minLength: 2, select: function(event, ui) { log(ui.item ? ("Selected: " + ui.item.label) : "Nothing selected, input was " + this.value); }, open: function() { $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); }, close: function() { $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); } }); 

您可以使用下载构建器来获取自动完成示例。 由于奖金自动完成function是可以设置的，您可以选择一个themeroller ready主题或编辑一个并创建自己的主题。

Answer 2

jqueryui的自动完成function每次都会发送完整的字符串，因此您可以使用它来执行您想要的操作。 您还可以编辑事件以保存最后一个搜索字符串，并将其与新请求一起发送（如果有帮助的话）。