引导预输入阿贾克斯结果格式 - 示例 [英] Bootstrap typeahead ajax result format - Example
问题描述
我使用的引导预输入与阿贾克斯的功能，想知道什么是正确的JSON结果的格式，返回一个ID和一个descripcion。 我需要的ID给预输入所选元素绑定一个MVC3模型。
这是在code：
[HTML]
＆LT;输入ID =myTypeahead级='Ajax的预输入类型=文本数据链接=myUrl数据提供=预输入/＆GT;
[JavaScript支持]
$（'＃myTypeahead）。预输入（{
来源：功能（查询，进程）{
返回$阿贾克斯（{
网址：$（'＃myTypeahead）的数据（链接）。
类型：'后'，
数据：{查询：查询}，
数据类型：JSON，
成功：函数（jsonResult）{
返回的typeof jsonResult ==未定义？假：过程（jsonResult）;
}
}）;
}
}）;
这工作正常，当我返回一个字符串一个简单的列表，例如：
{ITEM1，ITEM2，项目3}
但我想返回与ID的列表，例如：
{
{ID：1，值：项目1}，
{ID：2，值：ITEM2}，
{ID：3，价值：项目3}
}
如何在AJAX处理这样的结果？的成功：函数（）
这是很容易的是 jQuery的自动完成，因为我可以返回一个JSON对象名单。
[jQuery的自动完成处理数据举例]
...
成功：功能（数据）{
回应（$。图（数据，函数（项目）{
返程{标签：item.Id，值：item.Value，ID：item.Id，数据：项};
}）
...
但是，这并不与自举工作，事先键入的内容。
谁能帮我？
感谢。
我尝试了两天，终于我可以让它工作。 自举事先键入的内容不支持对象的数组作为结果通过默认，只有字符串的数组。因为匹配，分拣机，更新和荧光笔功能期望的字符串作为参数。</ P>
相反，引导支持自定义的匹配，分拣机，更新和荧光笔功能。因此，我们可以选择事先键入的内容重写这些功能。
II采用JSON格式，并绑定ID，以一个隐藏的HTML的输入。
在code：
$（'＃myTypeahead）。预输入（{
来源：功能（查询，进程）{
返回$阿贾克斯（{
网址：$（'＃myTypeahead）的数据（链接）。
类型：'后'，
数据：{查询：查询}，
数据类型：JSON，
成功：函数（结果）{
VAR resultList = result.map（函数（项目）{
VAR aItem = {ID：item.Id，名称：item.Name};
返回JSON.stringify（aItem）;
}）;
恢复处理（resultList）;
}
}）;
}，
匹配：函数（OBJ）{
VAR项目= JSON.parse（OBJ）;
返回〜item.name.toLowerCase（）的indexOf（this.query.toLowerCase（））
}，
分拣机：功能（项目）{
VAR beginswith = [] = CASESENSITIVE []，CASEINSENSITIVE = []，项目;
而（aItem = items.shift（））{
VAR项目= JSON.parse（aItem）;
如果beginswith.push（JSON.stringify（项目））（item.name.toLowerCase（）的indexOf（this.query.toLowerCase（））！）;
否则，如果（〜item.name.indexOf（this.query））caseSensitive.push（JSON.stringify（项目））;
其他caseInsensitive.push（JSON.stringify（项目））;
}
返回beginswith.concat（CASESENSITIVE，CASEINSENSITIVE）
}，
荧光笔：函数（OBJ）{
VAR项目= JSON.parse（OBJ）;
VAR的查询= this.query.replace（/[\-\[\]{}()*+?.,\\\^$ |＃\ S] /克，'\\ $＆功放;'）
返回item.name.replace（新的RegExp（'（'+查询+'），IG），功能（$ 1，匹配）{
回报'＆LT;强＆GT; +匹配+'＆LT; / STRONG＆GT;
}）
}，
更新：函数（OBJ）{
VAR项目= JSON.parse（OBJ）;
$（'＃IdControl）ATTR（'值'，item.id）。
返回item.name;
}
}）;
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.
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()"?
That is very easy with jquery Autocomplete, because I can return a Json Object list.
[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.
Can anyone help me?
Thanks.
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.
Instead, "Bootstrap" supports customizable "matcher", "sorter", "updater" and "highlighter" functions. So we can rewrite those functions in Typeahead options.
II used Json format, and bound the Id to a hidden html input.
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 ($1, match) {
return '<strong>' + match + '</strong>'
})
},
updater: function (obj) {
var item = JSON.parse(obj);
$('#IdControl').attr('value', item.id);
return item.name;
}
});
这篇关于引导预输入阿贾克斯结果格式 - 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
