Html Bootstrap typeahead ajax 结果格式 - 示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14901535/
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
Bootstrap typeahead ajax result format - Example
提问by Gonzalo
I am using Bootstrap typeahead with an ajax function, and want to know what is the correct Json result format, to return an Id and a descripcion. I need the Id to bind the typeahead selected element with a mvc3 model.
我正在使用带有 ajax 函数的 Bootstrap typeahead，并想知道什么是正确的 Json 结果格式，以返回一个 Id 和一个描述。我需要 Id 将预先输入的选定元素与 mvc3 模型绑定。
This is the code:
这是代码：
[Html]
<input id="myTypeahead" class='ajax-typeahead' type="text" data-link="myUrl" data-provide="typeahead" />
[Javascript]
$('#myTypeahead').typeahead({
source: function (query, process) {
return $.ajax({
url: $('#myTypeahead').data('link'),
type: 'post',
data: { query: query },
dataType: 'json',
success: function (jsonResult) {
return typeof jsonResult == 'undefined' ? false : process(jsonResult);
}
});
}
});
This works properly when I return a simple list of strings, for example:
{item1, item2, item3}
But I want to return a list with Id, for example:
{
{Id: 1, value: item1},
{Id: 2, value: item2},
{Id: 3, value: item3}
}
How to process this result in the ajax "success: function()"?
如何在ajax“成功：函数（）”中处理这个结果？
That is very easy with jquery Autocomplete, because I can return a Json Object list.
使用jquery Autocomplete非常容易，因为我可以返回一个 Json 对象列表。
[jquery Autocomplete process data example]
...
success: function (data) {
response($.map(data, function (item) {
return { label: item.Id, value: item.Value, id: item.Id, data: item };
})
...
But that doesn't work with boostrap Typeahead.
但这不适用于 boostrap Typeahead。
Can anyone help me?
谁能帮我？
Thanks.
谢谢。
回答by Gonzalo
I try for two days and finally I could it working. Bootstrap Typeahead doesn't support an array of objects as a result by default, only an array of string. Because "matcher", "sorter", "updater" and "highlighter" functions expect strings as parameter.
我尝试了两天，最后我可以工作了。默认情况下，Bootstrap Typeahead 不支持对象数组，只支持字符串数组。因为“matcher”、“sorter”、“updater”和“highlighter”函数需要字符串作为参数。
Instead, "Bootstrap" supports customizable "matcher", "sorter", "updater" and "highlighter" functions. So we can rewrite those functions in Typeahead options.
相反，“Bootstrap”支持可定制的“匹配器”、“排序器”、“更新器”和“突出显示”功能。所以我们可以在 Typeahead 选项中重写这些函数。
II used Json format, and bound the Id to a hidden html input.
II 使用 Json 格式，并将 Id 绑定到隐藏的 html 输入。
The code:
编码：
$('#myTypeahead').typeahead({
source: function (query, process) {
return $.ajax({
url: $('#myTypeahead').data('link'),
type: 'post',
data: { query: query },
dataType: 'json',
success: function (result) {
var resultList = result.map(function (item) {
var aItem = { id: item.Id, name: item.Name };
return JSON.stringify(aItem);
});
return process(resultList);
}
});
},
matcher: function (obj) {
var item = JSON.parse(obj);
return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
},
sorter: function (items) {
var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
while (aItem = items.shift()) {
var item = JSON.parse(aItem);
if (!item.name.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item));
else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
else caseInsensitive.push(JSON.stringify(item));
}
return beginswith.concat(caseSensitive, caseInsensitive)
},
highlighter: function (obj) {
var item = JSON.parse(obj);
var query = this.query.replace(/[\-\[\]{}()*+?.,\\^$|#\s]/g, '\$&')
return item.name.replace(new RegExp('(' + query + ')', 'ig'), function (, match) {
return '<strong>' + match + '</strong>'
})
},
updater: function (obj) {
var item = JSON.parse(obj);
$('#IdControl').attr('value', item.id);
return item.name;
}
});
回答by voodoo417
Note: I saw @EralpB`s comment "Is this still the best way to accomplish this task?"
注意：我看到@EralpB 的评论“这仍然是完成这项任务的最佳方式吗？”
Yes, @Gonzalo solution works, but it seems strange (like crutch,especially after using jQuery-Autocomplete) - it should work "from box".Better is to use this - Bootstrap-3-Typeahead. It supportsan array of objects as result: format - [{id: .. ,name:...},...,{id: .. ,name:...}]. Example for OP`s issue:
是的，@Gonzalo 解决方案有效，但它看起来很奇怪（就像拐杖，特别是在使用jQuery-Autocomplete 之后） - 它应该“从盒子”工作。更好的是使用这个 - Bootstrap-3-Typeahead。它支持对象数组作为结果：格式 - [{ id: .. , name:...},...,{ id: .. , name:...}]。OP的问题示例：
....
source: function (query, process) {
return $.ajax({
......
success: function (result) {
var resultList = [];
$.map(result,function (Id,value) {
var aItem = { id: Id, name: value};
resultList.push(aItem);
});
return process(resultList);
}
});
},
