使用JSON数据的Ajax / Jquery自动完成

我正在尝试设置我的Jquery UI自动完成字段以获取来自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：

 
 
 
Ingredient
 
Measurement
 
Amount
 
 
 
  

当我开始输入“mil”（用于牛奶）时，我的代码给了我这个错误：

编辑：

我做了一些改变，但是现在我得到了一个新的错误 –

[URL]第55行第25行未处理的exception

0x800a1391 – Microsoft JScript运行时错误：’data’未定义

  $("#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 }; })); 

小提琴 。

jQuery.map有助于将数组或对象中的所有项目转换为新的项目数组。

更新：添加filter

 $("#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 }; } })); } }); } });