Как заполнить опции autosuggest с помощью typeahead.js

Question

Я использую twitter typeahead.js, и я хотел бы отфильтровать результаты автозапуска с помощью recipe_type. Когда recipe_type 1, то предложить мне первые три варианта еще, если recipe_type является 2, то мне предложить пять других вариантов ...

Мой массив 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)); 

Answer 1

Это должно работать лучше, если вы также удалите конечный , из вашего массива 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. Использование этого метода устраняет необходимость использования сокета (который я фактически не вижу в документах в любом месте).

Answer 2

Мое текущее решение - вот что. Когда я нажимаю кнопку в div с id #recipe_type, я уничтожаю текущий объект 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)); 
});