jQuery自動完成填充數組

Question

我正在嘗試使用jQuery的自動完成功能，在閱讀了幾篇帖子后，我仍然有兩個問題：

1）我已經獲得自動完成功能來處理底部發布的代碼，但是我需要從我們的數據庫填充標題為“data”的數組。 我一直在嘗試使用不同的方法通過AJAX填充它。 我嘗試使用$ .get和$ .ajax。 完成此任務的正確語法是什么？

2）這個數組很大，如果我只填充數組一次，我會有60,000多個值。 我想知道每次用戶輸入新信件時是否可以執行AJAX請求來填充數組？ 這樣做會更好嗎，或者只是一次用所有值填充數組？ 更好的是，哪個系統減稅？

//This code works
<script type="text/javascript">
  $(document).ready(function(){
  var data = "Facebook Gowalla Foursquare".split(" ");
  $("#search_company").autocomplete(data);
  });
</script>


//display company live search
echo('<form id="form" method="post" action="competitor_unlink.php" onsubmit="return">');
echo('Company: <input id="search_company"/>');
echo('<br/>');
echo('<button type="submit" value="Submit">Submit</button>');
echo('</form>');

Answer 1

看看這個演示 - 這是你想要做的（使用ajax獲取數據）：

http://jqueryui.com/demos/autocomplete/#remote

您可以從本地和/或遠程源提取數據：本地適用於小型數據集（如包含50個條目的地址簿），遠程對於大型數據集是必需的，例如具有數百或數百萬條目的數據庫選擇。

只需指定源選項，即可自定義自動完成功能以使用各種數據源。 數據源可以是：

帶有本地數據的數組一個String，指定一個URL一個回調本地數據可以是一個簡單的字符串數組，或者它包含數組中每個項目的對象，帶有label或value屬性或兩者。 label屬性顯示在建議菜單中。 用戶從菜單中選擇了某些內容后，該值將插入到input元素中。 如果僅指定了一個屬性，則它將用於兩者，例如。 如果僅提供value-properties，則該值也將用作標簽。

使用String時，Autocomplete插件希望該字符串指向將返回JSON數據的URL資源。 它可以位於同一主機上，也可以位於不同的主機上（必須提供JSONP）。 請求參數“term”將添加到該URL。 數據本身可以與上述本地數據的格式相同。

第三種變體即回調提供了最大的靈活性，可用於將任何數據源連接到自動完成。 回調有兩個參數：

1）一個請求對象，具有一個名為“term”的屬性，它引用當前文本輸入中的值。 例如，當用戶在城市字段中輸入“new yo”時，自動完成術語將等於“new yo”。

2）響應回調，它期望單個參數包含要向用戶建議的數據。 應根據提供的術語過濾此數據，並且可以采用上述任何簡單本地數據格式（String-Array或具有標簽/值/兩者屬性的Object-Array）。 在提供自定義源回調以處理請求期間的錯誤時，這很重要。 即使遇到錯誤，也必須始終調用響應回調。 這可確保窗口小部件始終具有正確的狀態。

Answer 2

這是一個如何使用jQuery UI自動完成插件指定將數據庫結果作為JSON返回的URL的示例。

$("#search_company").autocomplete({
    source: "/Search", // <-- URL of the page you want to do the processing server-side
    minLength: 4 // <-- don't try to run the search until the user enters at least 4 chars
});

自動填充會自動將名為“term”的查詢字符串參數附加到網址，以便您的搜索頁面需要這樣做。 不確定你使用的服務器技術，但因為我是.NET開發人員，這是ASP.NET MVC中的一個例子:)

public ActionResult Search(string term) {
    var results = db.Search(term); // <-- this is where you query your DB
    var jqItems = new List<jQueryUIAutoCompleteItem>();
    foreach (var item in results) {
        jqItems.Add(new jQueryUIAutoCompleteItem() {
            value = item.CompanyId.ToString(),
            id = item.CompanyId.ToString(),
            label = item.CompanyName
        });
    }
    return Json(jqItems.ToArray(), JsonRequestBehavior.AllowGet);
}

jQueryUIAutoCompleteItem只是一個數據容器，表示自動完成插件所期望的JSON格式。

public class jQueryUIAutoCompleteItem {
    public string value { get; set; }
    public string label { get; set; }
    public string id { get; set; }
}

Answer 3

你將整個60,000記錄列表發送到客戶機器上並不是最好的解決方案。 您會注意到，Google僅在其自動填充功能中向您展示了一些最受歡迎的匹配，以及許多其他網站。

您可以通過等待用戶鍵入兩個或三個字母而不是搜索第一個字母來縮短列表。

你可以在列表中進行頁面分塊（它有各種名稱）。 也就是說，只返回前10或15場比賽。 用戶可以通過滾動或單擊“顯示更多結果”鏈接來獲取更多列表。 當然，你必須為此編寫（或搜索）所有的javascript代碼。

Answer 4

這篇文章可能有點晚了，但對其他人來說卻是這樣。 我為jquery創建了一個插件，並為Foursquare創建了jqueryui自動完成控件。 您可以閱讀帖子並在Foursquare Autocomplete插件下載插件