jQuery autosuggest示例

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

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

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

谢谢。

来源

2010-05-25 RUtt

jqueryui的自动完成每次发送完整的字符串，所以你可以做你想做的事情。您还可以编辑事件以保存最后一个搜索字符串，并将其与新请求一起发送，如果有帮助的话。

来源

2010-05-25 23:28:57

谢谢，我今天就来看看jqueryui。我最初传递它是因为该库变得有点重要，并且我们一直在有意识地努力优化页面加载时间 – RUtt 2010-05-26 14:40:35

只要您可以绑定到更改或发送事件，上面的“查询跟踪”想法仍然可以工作。 – 2010-05-26 14:47:31

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


} 
     });

可以使用download builder得到公正的自动完成的例子。作为奖励的自动完成是有主题的，你可以选择一个themeroller准备好的主题或编辑一个并创建自己的。

来源

2010-05-26 00:24:52 RedWolves

jQuery autosuggest示例

回答

相关问题