阿賈克斯/ jQuery的自動完成與JSON數據

Question

我想設置我的jQuery用戶界面自動完成場從一個Ajax連接有數據。這是我到目前爲止的代碼：

  $("#mainIngredientAutoComplete").autocomplete({ 
       source: function (request, response) { 
        $.ajax({ 
         url: "../api/IngredientChoices", 
         dataType: "json", 
         success: function (data) { 
          response(function (item) { 
           return { 
            label: item.MainName, 
            value: item.MainItemID 
           } 
          }); 
         } 
        }); 
       } 
      }); 

這是我的JSON：

[{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}] 

HTML：

<table id="tbl_ingredients" style="padding:0px;"> 
       <tr id="ingHeader"> 
        <td>Ingredient</td> 
        <td>Measurement</td> 
        <td>Amount</td> 
        <td><input id="mainIngredientAutoComplete" /></td> 
        <td></td> 
       </tr> 
</table> 

當我開始輸入 「密耳」（牛奶），我的代碼給我這個錯誤：

編輯：

我做你的變化，這工作了幾年的嘗試，但現在我得到一個新的錯誤 - 在[URL]

55行

未處理的異常，列25 0x800a1391 - 微軟JScript運行時錯誤：「數據」是不確定的

 $("#mainIngredientAutoComplete").autocomplete({ 
      source: function (request, response) { 
       $.ajax({ 
        url: "../api/IngredientChoices", 
        dataType: "json", 
        response: ($.map(data, function(v,i){ 
         return { 
          label: v.MainName, 
          value: v.MainItemID 

         }})) 
       }); 
      } 
     }); 

Answer 1

你需要成功的回調改變

response($.map(data, function(v,i){ 
    return { 
       label: v.MainName, 
       value: v.MainItemID 
       }; 
})); 

Fiddle。

的jQuery.map有助於翻譯在數組或對象，以項目的新陣列中的所有項目。

更新：添加篩選

$("#mainIngredientAutoComplete").autocomplete({ 
    source: function (request, response) { 
     var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i"); 
     $.ajax({ 
      url: "../api/IngredientChoices", 
      dataType: "json", 
      success: function (data) { 
       response($.map(data, function(v,i){ 
        var text = v.MainName; 
        if (text && (!request.term || matcher.test(text))) { 
         return { 
           label: v.MainName, 
           value: v.MainItemID 
           }; 
        } 
       })); 
      } 
     }); 
    } 
});