Geek asks and answers

Do a Twitter bootstrap search in multiple fields

By default, the typeahead plugin uses a single data source to produce results. I would like it to search in multiple fields, so if I say, I have:

var items = [
    {'title': 'Acceptable', 'description': 'Good, but not great'}
]

He will search in the fields titleand description, ideally, through AJAX.

Is this possible with this plugin?

+4
source share
2 answers

Typeahead JSON . Github , , select render. , highlighter, matcher, sorter updater, , typeahead.

var typeahead = control.typeahead({ /* ... */ }).data('typeahead');

// manually override select and render
//  (change attr('data-value' ...) to data('value' ...))
//  otherwise both functions are exact copies
typeahead.select = function() {
    var val = this.$menu.find('.active').data('value')
    this.$element.val(this.updater(val)).change()
    return this.hide()
};
typeahead.render = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).data('value', item)
        i.find('a').html(that.highlighter(item))
        return i[0]
    });

    items.first().addClass('active')
    this.$menu.html(items)
    return this
};

, , :

control.typehead({
    matcher: function (item) {
        var lcQuery = this.query.toLowerCase();
        return ~item.title.toLowerCase().indexOf(lcQuery)
            || ~item.description.toLowerCase().indexOf(lcQuery);
    }
};

JFiddle, pull, , 2.3.1, 3.x , sorter, , matcher ( ).

AJAX, source , AJAX. source, , process, .

control.typehead({
    minLength: 3,
    source: function(query, process) {
        $.ajax({
            url: url + encodeURIComponent(query),
            type: 'GET',
            success: process,
            error: function() { /* ... */ }
        });
    }
});
+2

Typeahead 10.3 https://github.com/twitter/typeahead.js/pull/811

:
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title', 'description'),

0

More articles:


All Articles