如何使用typeahead.js填充自動提示選項

我正在使用twitter typeahead.js，我想通過recipe_type篩選自動提示結果。當recipe_type是1，那麼建議我前三個選項否則，如果recipe_type爲2，則建議我等五個選項...如何使用typeahead.js填充自動提示選項

我的JSON數組是這樣的：

[ 
{ "recipe_type": "1", "value": 1 , "text": "Čebula"}, 
{ "recipe_type": "1", "value": 2 , "text": "Paradižnik"}, 
{ "recipe_type": "1", "value": 3 , "text": "Juha"}, 
{ "recipe_type": "2", "value": 4 , "text": "Česen"}, 
{ "recipe_type": "2", "value": 5 , "text": "Grah"}, 
{ "recipe_type": "2", "value": 6 , "text": "Sol"}, 
{ "recipe_type": "2", "value": 7 , "text": "Poper"}, 
{ "recipe_type": "2", "value": 8 , "text": "Ješprenj"}, 
]

我的搜索代碼：

var elt = $('#search_input'); 

elt.tagsinput({ 
    itemValue: 'value', 
    itemText: 'text', 
    freeInput: false 
}); 


elt.tagsinput('input').typeahead({ 
    valueKey: 'text', 
    //prefetch: 'assets/js/cities.json', 
    prefetch : 
    { 
     url: 'assets/js/file.json', 
     matcher: function (item) { 
      return item.recipe_type == '1' 
     } 
    }, 
    /*template: '<p>{{text}}</p>',*/ 
    engine: Hogan, 
    matcher: function(item) { 
     return item.recipe_type == '1' 
    } 
}).bind('typeahead:selected', $.proxy(function (obj, datum) { 
     this.tagsinput('add', datum); 
     this.tagsinput('input').typeahead('setQuery', ''); 
    }, elt));

來源

2013-11-20 Gasper

只要您從Json數組中刪除尾隨的,，這應該會更好。

elt.tagsinput('input').typeahead({ 
    valueKey: 'recipe_type', 
    prefetch :'assets/js/file.json', 
    template: '<p>{{text}}</p>', 
    engine: Hogan 
}).bind('typeahead:selected', $.proxy(function (obj, datum) { 
     this.tagsinput('add', datum); 
     this.tagsinput('input').typeahead('setQuery', ''); 
}, elt));

主要的問題是valueKey應該設置爲你想用作鍵值來搜索你的Json值列表的值。使用它可以消除使用匹配器的必要（我實際上沒有在任何地方看到文檔中列出的）。

來源

2013-11-20 21:59:13 Dhaulagiri

請參閱我的回答，我認爲我的問題不是很清楚。在我的回答中，你會看到我想要的... – Gasper

你的回答並沒有真正使它更清楚你想要做什麼... – Dhaulagiri

hm，當我選擇不同的recipe_type（1,2,3,4， 5 ...）我希望我的前面提示我適當的結果。示例：如果用戶在下拉菜單中選擇recipe_type 1，則建議必須有值Čebula，Paradižnik，Juha，如果用戶選擇recipe_type 2，則必須有值Česen，Grah，Sol，Poper，Ješprenj。理解？ – Gasper

我目前的解決方案是波紋管。當我點擊與＃idipe_type div div中的按鈕我銷燬當前typeahead對象，並創建一個不同的recipe_type過濾器。有沒有更好的解決方案？

var recipe_type = "1"; 

var elt = $('#search_input'); 

elt.tagsinput({ 
    itemValue: 'value', 
    itemText: 'text', 
    freeInput: false 
}); 


elt.tagsinput('input').typeahead({ 
    valueKey: 'text', 
    prefetch: { 
     url: 'assets/js/cities.json', 

     filter: function (data) { 
      var dataSet = []; 

      for(var i = 0; i < data.length; i++) { 
       var receivedData = data[i]; 
       if(receivedData.recipe_type == recipe_type){ 
        dataSet.push(receivedData); 
       } 

      } 
      return dataSet; 
     } 
    }, 
    /*template: '<p>{{text}}</p>',*/ 
    engine: Hogan 
}).bind('typeahead:selected', $.proxy(function (obj, datum) { 
     this.tagsinput('add', datum); 
     this.tagsinput('input').typeahead('setQuery', ''); 
    }, elt)); 

$('#recipe_type button').click(function(){ 

    $("#recipe_type button.btn-success").removeClass("btn-success"); //Remove any "active" class 
    $(this).addClass("btn-success"); //Add "active" class to selected tab 

    recipe_type = $(this).data('file') 

    elt.tagsinput('input').typeahead('destroy'); 

    elt.tagsinput('input').typeahead({ 
     valueKey: 'text', 
     prefetch: { 
      url: 'assets/js/cities.json', 

      filter: function (data) { 
       var dataSet = []; 

       for(var i = 0; i < data.length; i++) { 
        var receivedData = data[i]; 
        if(receivedData.recipe_type == recipe_type){ 
         dataSet.push(receivedData); 
        } 

       } 
       return dataSet; 
      } 
     }, 
     engine: Hogan 
    }).bind('typeahead:selected', $.proxy(function (obj, datum) { 
      this.tagsinput('add', datum); 
      this.tagsinput('input').typeahead('setQuery', ''); 
     }, elt)); 
});

來源

2013-11-21 12:13:48 Gasper

如何使用typeahead.js填充自動提示選項

回答

相關問題