html – Bootstrap typeahead ajax结果格式

我正在使用带有ajax功能的Bootstrap typeahead,并想知道什么是正确的Json结果格式,以返回Id和描述.
我需要Id来使用mvc3模型绑定所选元素.

这是代码：

[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}
}

如何处理这个结果在ajax“success：function()”中？

这是非常容易的jquery自动完成,因为我可以返回一个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 };
                })
...

但是,这并不适用于头发的头发.

有人可以帮我吗

谢谢.

解决方法

我试了两天,终于可以工作了.
Bootstrap Typeahead默认情况下不支持对象数组,只能使用字符串数组.因为“匹配器”,“分类器”,“更新器”和“荧光笔”功能需要字符串作为参数.

相反,“Bootstrap”支持可定制的“匹配器”,“排序器”,“更新器”和“荧光笔”功能.所以我们可以在Typeahead选项中重写这些功能.

II使用Json格式,并将Id绑定到隐藏的html输入.

代码：

$('#myTypeahead').typeahead({
    source: function (query,process) {
        return $.ajax({
            url: $('#myTypeahead').data('link'),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;
    }
});

html – Bootstrap typeahead ajax结果格式 – 示例

解决方法

猜你在找的HTML相关文章