0

我正在使用 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));
4

2 回答 2

0

我目前的解决方案如下。当我单击 id 为 #recipe_type 的 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-21T12:13:48.657 回答
0

如果您还,从 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-20T21:59:13.177 回答