Question

我正在使用twitter typeahead.js，我想通过recipe_type过滤autosuggest结果。当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

我目前的解决方案如下：当我点击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));
});

如何使用typeahead.js过滤autosuggest选项

2 个答案: