ブートストラップ先読みajaxの結果フォーマット - 例

Question

私はajax関数でブートストラップ型の先読みを使用していて、正しいJson結果フォーマットが何であるかを知りたいので、Idとdescripcionを返します。 選択された先読み要素をmvc3モデルでバインドするには、Idが必要です。

これはコードです： "：機能（）成功" アヤックスでこの結果をどのように処理するかを

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

？

非常に簡単です。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 }; 
       }) 
... 

しかし、これはboostrapypeaheadでは機能しません。

誰でも手伝ってもらえますか？

ありがとうございました。

Answer 1

私は2日間試してみると、私はそれを働かせることができました。 Bootstrap Typeaheadは、結果としてデフォルトでオブジェクトの配列をサポートしておらず、文字列の配列のみをサポートしています。 "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); 
     } 
    }); 
    },