jQuery UI自動完成並帶有外部JSON文件

Question

我正在嘗試通過讀取外部文件（即data.json）來編寫jQuery UI自動完成功能。 當我嘗試從數組中讀取代碼時，代碼工作正常，但是如果我嘗試從外部文件中讀取代碼，則該代碼將不再起作用！ 不知道為什么！

這是我的代碼：

http://plnkr.co/edit/LPqBGyocpswPrEzjb1Nq?p=preview

要么

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Autocomplete functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#autocomplete1" ).autocomplete(
            {
                source:"data.json",
                select: function( event, ui ) {
                    $( "#autocomplete1" ).val( ui.item.code + " - " + ui.item.label );
                    return false;
                }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a>" + item.code + " - " + item.label + "</a>" )
                    .appendTo( ul );
                };      

        });        
      </script>
   </head>

   <body>
      <input type="text" id="autocomplete1" size=40/>
   </body>
</html>

/ ****************************************************** ******* /

這是data.json文件：

{   
    {
        "code":"YOO",
        "label":"Oshawa",
        "country":"Canada",
    },
    {
        "code":"YOW",
        "label":"Ottawa Macdonald-Cartier International",
        "city":"Ottawa",
    },
    {
        "code":"YOH",
        "label":"Oxford House",
        "city":"Oxford House",
    } 
}

TKS

Answer 1

從文檔：

源類型：數組或字符串或函數（對象請求，函數響應（對象數據））

                                               Default: none; must be specified

定義要使用的數據，必須指定。 與您使用的變體無關，標簽始終被視為文本。 如果您希望標簽被視為html，則可以使用ScottGonzález的html擴展名。 這些演示都集中於source選項的不同變體-查找與您的用例匹配的選項，並查看代碼。

支持多種類型：

數組：數組可用於本地數據。 支持兩種格式：
- 字符串數組： [ "Choice1", "Choice2" ]
- 具有label和value屬性的對象數組： [ { label: "Choice1", value: "value1" }, ... ]
標簽屬性顯示在建議菜單中。 當用戶選擇一個項目時，該值將插入到輸入元素中。 如果僅指定一個屬性，則將同時使用這兩個屬性，例如，如果僅提供值屬性，則該值也將用作標簽。
String ：使用字符串時，自動完成插件會期望該字符串指向將返回JSON數據的URL資源。 它可以在同一主機上，也可以在其他主機上（ 必須提供JSONP ）。 Autocomplete插件不會過濾結果，而是會在查詢字符串中添加一個term字段，服務器端腳本應使用該字段來過濾結果。 例如，如果source選項設置為"http://example.com" ，並且用戶鍵入foo ，則將向http://example.com?term=foo發出GET請求。 數據本身可以采用與上述本地數據相同的格式。
功能：第三個變體是回調，它提供了最大的靈活性，可用於將任何數據源連接到自動完成。 回調有兩個參數：
- 具有單個term屬性的請求對象，它引用文本輸入中當前的值。 例如，如果用戶在城市字段中輸入“ new yo”，則“自動完成”字詞將等於“ new yo”。
- 響應回調，它需要一個參數：向用戶建議的數據。 該數據應根據提供的術語進行過濾，並且可以采用上述針對簡單本地數據描述的任何格式。 提供自定義源回調以處理請求期間的錯誤時，這一點很重要。 即使遇到錯誤，也必須始終調用響應回調。 這樣可以確保小部件始終具有正確的狀態。
在本地過濾數據時，可以使用內置的$.ui.autocomplete.escapeRegex函數。 它只需要一個字符串參數，並轉義所有正則表達式字符，因此可以安全地將結果傳遞給new RegExp() 。

您要指定一個string 。 這里的關鍵點是：

Autocomplete插件不會過濾結果，而是添加了帶有term字段的查詢字符串， 服務器端腳本應使用該字段來過濾結果 。 例如，如果source選項設置為"http://example.com" ，並且用戶鍵入foo，則將向http://example.com?term=foo發出GET請求。 數據本身可以采用與上述本地數據相同的格式。

字符串（如果要指定要命中的url ，它將以指定的格式返回數據。

jQueryui自動完成功能不直接接受JSON，因此您的代碼無法正常工作。 您應該指定一個有效的數據源。

他們的插件，他們的規則:)

有關：

jQuery UI自動完成並帶有外部JSON文件

問題描述

1 個解決方案

解決方案1
1 2014-08-20 04:30:08

jQuery UI自動完成並帶有外部JSON文件

問題描述

1 個解決方案

解決方案1 1 2014-08-20 04:30:08

解決方案1
1 2014-08-20 04:30:08