Bootstrap typeahead ajax结果格式 - 示例

我正在使用Bootstrap typeahead和ajax函数，并且想知道什么是正确的Json结果格式，以返回Id和描述。我需要Id将typeahead选定元素与mvc3模型绑定。Bootstrap typeahead ajax结果格式 - 示例

这是代码：

[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 “的成功：函数（）”？

这很容易与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 }; 
       }) 
...

但这并不适用于boostrap Typeahead。

任何人都可以帮助我吗？

谢谢。

来源

2013-02-15 Gonzalo

您是否尝试将返回值转换为'Array'而不是？ var list = [{Id：1，value：item1}，{Id：2，value：item2}，{Id：3，value：item3}];' – 2013-02-15 19:11:47

是的，我没有问题。我的问题是如何绑定与HTML控制的Id。进程（数据）函数只接受一个字符串数组，而不是一个对象数组 – Gonzalo 2013-02-15 19:18:27

您使用的是最新版本的TypeAhead？ – 2013-02-15 19:30:33

我试了两天，终于可以工作了。默认情况下，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; 
    } 
});

来源

2013-02-19 14:03:49 Gonzalo

谢谢！这就像一个魅力！ – 2013-08-20 09:48:01

这是否仍然是完成此任务的最佳方式？ – EralpB 2013-09-06 00:19:38

谢谢，谢谢！人，我一直在寻找一个可行的解决方案，以获得bootstrap 2.3.2 typeahead方法来读取数据集并根据所选项更新页面上的不同字段。如果我忘记提及它 - 谢谢！ – MichaelJTaylor 2014-06-05 08:58:41

注：我看到@ EralpB`s评论 “这仍然是完成这一任务的最好方法是什么？”

是，@Gonzalo解决方案的工作，但它似乎很奇怪（如拐杖，尤其是在使用jQuery的自动完成后） - 它应该工作“从盒子” .Better就是用这种 - Bootstrap-3-Typeahead。它支持对象的数组作为结果：格式 - [{ID：..，名称：...}，...，{ID：..，名称：... }]。 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); 
     } 
    }); 
    },

来源

2015-09-21 14:38:21 voodoo417

Bootstrap typeahead ajax结果格式 - 示例

回答

相关问题