Twitter Typeahead 以编程方式选择和触发选择答案

【问题标题】：Twitter Typeahead programmatically select and trigger selectionTwitter Typeahead 以编程方式选择和触发选择
【发布时间】：2014-03-03 07:13:15
【问题描述】：

我想实现一个功能，如果我点击一个 DOM 元素，那么它应该自动填充一个带有指定值的预先输入，它应该触发 typeahead:selected 。

我发现了很多与之相关的问题，答案是jQuery#typeahead('val', val) 或jQuery#typeahead('setQuery', myQuery)

但两者都只选择了我想要的选项，它没有触发点击下拉选项。有什么办法吗？

【问题讨论】：

标签： typeahead.js twitter-typeahead

【解决方案1】：

要像用户点击项目一样触发它，您必须使用您的数据更新字段中的值。

简短的回答就像 Sergey Stativa 发布的那样：$('.typeahead').val(yourValue).trigger('change');

这里有一个案例用法示例的长答案，我正在添加一个使用 Bloodhound 的解决方案，但你的问题的核心并不是那么复杂，我只是希望它可以在未来对某人有所帮助，所以这就是全部在这里。

假设您有这样的模板：

var arrNames = ['Luke','Han','Leia'];

var nameDisplayBh = new Bloodhound({
        datumTokenizer: function (datum) {
            return Bloodhound.tokenizers.whitespace(datum.RebelNames);
        },
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        local: arrNames
    });


    $('.typeahead').typeahead({
        hint: true,
        highlight: true,
        minLength: 1
    },{
        name: Names Display,
        source: nameDisplayBh.ttAdapter(),
        display:"RebelNames",
        templates:
        {
            suggestion: function(data)
            {
                return "<div>data.name</div>";
            }
        }
   });


$('.typeahead').bind('typeahead:select', function(ev, suggestion) 
    {
        console.log(suggestion.name);
    });


var nameInYourList = arrNames[0];
$('.typeahead').val(nameInYourList).trigger('change');

【讨论】：

【解决方案2】：

您应该调用change 事件来应用新值

$('.typeahead').val(Your value).trigger('change');

【讨论】：

请解释一下您的解决方案并用代码块包装。