Bootstrap typeahead ajax 结果格式 - 示例

Posted 2023-03-05

【中文标题】Bootstrap typeahead ajax 结果格式 - 示例

【英文标题】：Bootstrap typeahead ajax result format - Example

【发布时间】：2013-01-31 19:57:16

【问题描述】：

我正在使用带有 ajax 函数的 Bootstrap typeahead，并且想知道正确的 Json 结果格式是什么，以返回 Id 和描述。 我需要 Id 将 typeahead 选定元素与 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 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 ;
                )
...

但这不适用于 boostrap Typeahead。

谁能帮帮我？

谢谢。

【问题讨论】：

您是否尝试将返回值转换为Array？ var list = [Id: 1, value: item1,Id: 2, value: item2,Id: 3, value: item3];

是的，我对此没有任何问题。我的问题是如何将 Id 与 html 控件绑定。 Process(data) 函数只接受字符串数组，不接受对象数组

您使用的是最新版本的 TypeAhead 吗？

是的，我正在使用最新版本

【参考方案1】：

我尝试了两天，终于可以正常工作了。 默认情况下，Bootstrap Typeahead 不支持对象数组，只支持字符串数组。因为“matcher”、“sorter”、“updater”和“highlighter”函数需要字符串作为参数。

相反，“Bootstrap”支持可自定义的“matcher”、“sorter”、“updater”和“highlighter”功能。所以我们可以在 Typeahead 选项中重写这些函数。

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

代码：

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

【讨论】：

这仍然是完成这项任务的最佳方式吗？

谢谢，谢谢！伙计，我一直在到处寻找可行的解决方案，以获取 bootstrap 2.3.2 typeahead 方法来读取数据集并根据所选项目更新页面上的不同字段。以防我忘记提及 - 谢谢！

【参考方案2】：

注意：我看到@EralpB 的评论“这仍然是完成这项任务的最佳方式吗？”

是的，@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);
        
    );
  ,