4

我想实现一个类似于 Twitter 的网络应用程序的原始后备选项，其中它具有输入值的最终自动完成选项（例如Search all people for {{input.val()}}）：

倒退

我当前的实现失败了，因为Typeahead.js不会重新加载本地数据集，因此所需的效果只发生在第一个 keyup 事件上：

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

您可以通过使用自定义源函数将新数据集添加到 typeahead 来做到这一点。

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 回答