4

默认情况下，typeahead 插件使用单个数据源来获取结果。我想要的是它在多个字段中搜索，所以如果说，我有：

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

它将搜索title和description字段，最好是通过 AJAX。

这个插件可以实现吗？

4

2 回答 2

2

Typeahead 不支持在没有两个调整的情况下使用 JSON 对象。Github 中对此的拉取请求很少，我自己也提交了一个，但是目前您必须手动覆盖selectand render。此外，您还必须覆盖highlighter、matcher、sorter和updater，但这些可以通过传递给预输入的选项来完成。

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 示例，但是在没有接受拉取请求的情况下，排序功能在 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() { /* ... */ }
        });
    }
});
于 2013-04-17T02:36:50.873 回答
0

Typeahead 在 v10.3 中添加了对多字段搜索的支持 https://github.com/twitter/typeahead.js/pull/811

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

于 2015-02-13T23:35:55.197 回答