阿贾克斯/ 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 
           }; 
        } 
       })); 
      } 
     }); 
    } 
});