4

入力の値の最終的なオートコンプリート オプションがある Twitter の Web アプリに似た生のフォールバック オプションを実装したいと考えています (例: Search all people for {{input.val()}}):

後退する

Typeahead.jsはローカル データセットをリロードしないため、現在の実装は失敗します。したがって、最初のキーアップ イベントでのみ目的の効果が発生します。

var plusone = [
    {
        value: '',
        tokens: ''
    }
];

$('#name').keyup(function () {
    plusone[0].value = $('#name').val();
    plusone[0].tokens = $('#name').val();
});

$('#name').typeahead(
    [
        {
            local: plusone
        }
    ]
);

ドキュメントとこのチュートリアルによると、最初にタイプアヘッドを破棄せずにタイプアヘッドを再初期化する方法はありません。これは、パフォーマンスのために行う必要はありません。より良い実装または修正に関する提案は大歓迎です (Twitter の誰かがそこにいる場合は、実装を知りたいです)。

4

1 に答える 1

1

これを行うには、カスタム ソース関数を使用して先行入力に新しいデータセットを追加します。

var nbaTeams = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: 'nba.json'
});

nbaTeams.initialize();

$('#autosuggest-input').typeahead({
    highlight: true,
    hint: false
}, {
    name: 'nba-teams',
    displayKey: 'team',
    source: nbaTeams.ttAdapter(),
    templates: {
        header: '<h3 class="league-name">NBA Teams</h3>'
    }
}, {
    name: 'advanced-search',
    displayKey: 'name',
    // For every dataset, typeahead expects you to provide a source property
    // which is a function that accepts two arguments: query and cb. And you
    // can do whatever you want in that function. In this case, what we do
    // is that regardless of the query provided, you will always return the
    // same result.
    source: function(query, cb) {
        var result = [{
            'name': 'Advance search for "' + query + '"'
        }];
        cb(result);
    },
    templates: {
        header: '<div style="border-top: 1px solid black;"></div>'
    }
});

デモとクレジット: http://plnkr.co/edit/cjL6nZtShyxmLjWxzdBC?p=preview

于 2015-05-17T21:25:49.800 に答える