javascript - 如何在 Typeahead 中获取多个输入？

Question

如何允许用户在输入文本框中输入多个值，例如，他输入 ph，建议弹出 php，他选择它，接下来他输入 da，建议数据库弹出，他也选择它。所以最后我的输入框中的文本看起来像

php, databases

我应该如何实现这个效果？

我尝试了以下代码:

$(document).ready(function () {

    var getTags = new Bloodhound({
        datumTokenizer: function(d){ return Bloodhound.tokenizers.whitespace(d.result)},
        queryTokenizer: function(d){ return Bloodhound.tokenizers.whitespace(d)},
        remote: {
            url: 'query=plughere',
            wildcard: 'plughere'
        }
    });
    getTags.initialize();
    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    }, {
        name: 'states',
        displayKey: 'name',
        source: getTags.ttAdapter(),        
    });

    $('.typeahead').bind('typeahead:selected typeahead:autocomplete', function(evt, item) {
        f = $('#hemo').val();
        $('#hemo').val(f + ", ");
    });

});

我将我的服务器编程为仅考虑逗号后的最后一个单词。

这里 hemo 是我的文本框的 ID。一旦我选择数据库，它就会删除之前已经输入的单词。因此，如果我先选择 php，然后选择数据库，它会从文本框中删除 php 并向其中添加数据库。

Jsfiddle

Answer 1

如果我是正确的，那么该绑定(bind)事件的第二个参数将输出基于此 link 的值。那么你应该像这样使用它。

 $('.typeahead').bind('typeahead:selected typeahead:autocomplete', function(evt, item) {
    f = $('#hemo').val();
    $('#hemo').val(f + item.value + ", ");
 });

更新

查看你的 fiddle 后，我以为你会有另一个文本框，你选择的值就放在那里。

我不确定这是否是您想要的，但作为解决方法，您可以将所有这些选定的值放在不同的文本框中。

示例:Fiddle