Bootstrap typeahead ajax結果格式 - 示例

Question

我正在使用Bootstrap typeahead和ajax函數，並且想知道什麼是正確的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 「的成功：函數（）」？

這很容易與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。

任何人都可以幫助我嗎？

謝謝。

Answer 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; 
    } 
}); 

Answer 2

注：我看到@ 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); 
     } 
    }); 
    },