jQuery的自動完成填寫陣列

我試圖使用jQuery的自動完成功能，以及讀取多個職位後，我仍然有兩個問題：jQuery的自動完成填寫陣列

1）我已經得到自動完成與張貼在底部的代碼工作，但我需要從我們的數據庫填充標題爲「數據」的數組。我一直試圖使用不同的方法來通過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>');

來源

2010-12-14 user387049

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

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

您可以從本地和/或遠程數據源提取數據：本地對於小數據集（如地址爲的書有50個條目）是好的，對於大數據集而言遠程的是，如具有數百或數百萬的條目以供選擇的數據庫。

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

與本地數據字符串，指定URL回調本地數據可以是字符串，的簡單陣列，或者它包含在陣列中的每個項目對象的數組，與標籤或值屬性或兩者兼而有之。屬性顯示在建議菜單中。在用戶從菜單中選擇了某些內容後，該值將被插入到輸入元素中的。如果僅指定一個屬性，則它將用於兩個，例如。如果您只提供值屬性，則該值也將被用作標籤的。

使用字符串時，自動填充插件希望字符串指向將返回JSON數據的URL資源。它可以在相同的主機上或不同的一個（必須提供JSONP）。請求參數「term」被添加到該 URL中。數據本身可以是與上述本地數據相同的格式。

第三變型中，回調，提供最大的靈活性，並且可以被用於任何數據源自動填充連接到。回調得到2個參數：

1）一個請求對象，具有單個屬性稱爲「術語」，其指的值目前在文本輸入。例如，當用戶在城市字段中輸入「new yo」時，自動填充項的自動填充項將等於「new yo」。

2）一個響應回調，它需要一個參數包含數據建議給用戶。這個數據應當基於提供術語進行濾波，並且可以是任何的上述用於簡單本地數據（字符串-Array或對象陣列與標籤/值/兩性質）中描述的格式。當提供自定義源回調到處理請求期間的錯誤時很重要。即使您遇到錯誤，您也必須始終呼叫回復回撥。這個確保小部件始終具有正確的狀態。

來源

2010-12-14 18:22:25

我試着按照網站上的說明操作，但是我仍然無法使其工作。它看起來像我試圖通過AJAX獲取請求訪問的PHP腳本甚至沒有被運行。不過，在此之前，我已經完成了大量的AJAX獲取請求。有任何想法嗎？ – user387049 2010-12-14 22:17:27

你是正確的，發送整個60,000記錄列表到客戶端的機器聽起來並不像最好的解決方案。您會注意到，Google僅向您顯示少數自動完成中最受歡迎的匹配項，至於其他許多網站。

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

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

來源

2010-12-14 18:22:18 DOK

那麼填充此數組的最佳方式是什麼？ onkeyup調用上面列出的JavaScript函數？（obv將其從已準備中更改） – user387049 2010-12-14 18:23:27

下面是如何指定將使用jQuery UI自動完成插件從JSON返回數據庫結果的URL的示例。

自動完成將自動命名爲「術語」查詢字符串參數添加到URL，這樣你的搜索頁面將需要期待。不知道你正在使用的服務器技術，但因爲我在這裏一個.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; } 
}

來源

2010-12-14 19:42:27

這篇文章可能有點晚了，但對於其他人來說可能會發現它。我爲jquery和與Foursquare合作的jqueryui自動完成控件創建了一個插件。您可以閱讀帖子並下載插件Foursquare Autocomplete Plugin

來源

2012-09-07 14:17:58

jQuery的自動完成填寫陣列

回答

相關問題