Twitter typeahead.js / Bloodhound (v 0.10.2):如何动态更新(本地)源

Question

在下面的示例中，您应该如何更新(本地)"source"

选中的值应该从"源"中删除(必要时最终也要重新添加)，这样它就不能再被选中了。

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
    'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
    'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
    'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
    'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
    'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
    'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
    'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
    'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
// constructs the suggestion engine
var states = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(states, function(state) { return { value: state }; })
});
// kicks off the loading/processing of `local` and `prefetch`
states.initialize();
$('#input')
    .typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'states',
        displayKey: 'value',
        source: states.ttAdapter()
    })
    .on('typeahead:selected', function(object, datum) {
        // This is the function that should update the "source" (i.e.: delete the selected value from it)
        update_the_source_with(datum.value);
    });

Answer 1

我已经成功地使用了当前版本的Typeahead。关键是不要使用Bloodhound#ttAdapter()作为源。相反，直接使用Bloodhound#get()和一个自定义回调，根据当前选择检查建议。

这是一个jsfiddle: http://jsfiddle.net/likeuntomurphy/tvp9Q/

var selected = [];
var select = function(e, datum, dataset) {
    selected.push(datum.val);
    $("#selected").text(JSON.stringify(selected));
    $("input.typeahead").val("");
}
var filter = function(suggestions) {
    return $.grep(suggestions, function(suggestion) {
        return $.inArray(suggestion.val, selected) === -1;
    });
}
var data = new Bloodhound({
    name: 'animals',
    local: [{ val: 'dog' }, { val: 'pig' }, { val: 'moose' }],
    datumTokenizer: function(d) {
      return Bloodhound.tokenizers.whitespace(d.val);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace
});
data.initialize();
$('input.typeahead').typeahead(null,
    {
        name: 'animals',
        displayKey: 'val',
     /* don't use
        source: data.ttAdapter(), */
        source: function(query, cb) {
            data.get(query, function(suggestions) {
                cb(filter(suggestions));
            });
        },
        templates: {
            empty: '<div class="empty-message">No matches.</div>'
        }
    }
).bind('typeahead:selected', select);

如果你选择"狗"，你会看到它不再可以被再次选择。这实际上并没有从数据集中删除所选内容。所以，如果你实现了取消选择的功能，你所要做的就是把它从你的选择数组中删除——之后它会自动再次出现在建议中。