javascript - 複数のフィールド内で Twitter Bootstrap の typead 検索を行う

Question

デフォルトでは、typeahead プラグインは単一のデータ ソースを使用して結果を取得します。私が望むのは、複数のフィールド内で検索することです。たとえば、次のようにします。

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

title理想的には AJAX を介して、とdescriptionフィールドの両方を検索します。

このプラグインでこれは可能ですか？

Answer 1

Typeahead は、2 つの微調整なしでは JSON オブジェクトの使用をサポートしません。これに関する Github のプル リクエストはほとんどなく、私自身も 1 つ提出しましたが、現在、手動で と をオーバーライドする必要がありselectます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ます（並べ替え中に両方をチェックします）。

sourceAJAX 呼び出しに関しては、渡されたオプションのメソッドをオーバーライドして、 AJAX 機能を取得できます。呼び出しに戻らないsourceことで、2 番目のパラメーターが結果とともに呼び出されると想定process,されます。

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