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示例

回答

相關問題