带有 JSON 数据的 Ajax/Jquery 自动完成
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14493250/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax / Jquery Autocomplete with JSON data
提问by Yecats
I am trying to setup my Jquery UI autocomplete field to have data from an ajax connection. Here is my code so far:
我正在尝试设置我的 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
}
});
}
});
}
});
This is my JSON:
这是我的 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:
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>
When I start to type "mil" (for milk) my code gives me this error:
当我开始输入“mil”（牛奶）时，我的代码给了我这个错误：
EDIT:
编辑：
I made your change, which worked for a few attempts but now I am getting a new error -
我做了你的改变，尝试了几次，但现在我遇到了一个新错误 -
Unhandled exception at line 55, column 25 in [URL]
[URL] 中第 55 行第 25 列的未处理异常
0x800a1391 - Microsoft JScript runtime error: 'data' is undefined
0x800a1391 - Microsoft 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
}}))
});
}
});
回答by Arun P Johny
You need to change the success callback to
您需要将成功回调更改为
response($.map(data, function(v,i){
return {
label: v.MainName,
value: v.MainItemID
};
}));
小提琴。
The jQuery.maphelps to Translate all items in an array or object to new array of items.
该jQuery.map有助于翻译在数组或对象，以项目的新阵列中的所有项目。
Update: Add 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
};
}
}));
}
});
}
});
