我想实现功能,如果我单击一个 DOM 元素,那么它应该自动填充一个 typeahead 并在其内部使用指定值,它应该触发相同的typeahead:selected
。
我发现许多与之相关的查询,答案是jQuery#typeahead('val', val)
或jQuery#typeahead('setQuery', myQuery)
但两者都只选择了我想要的选项,它没有触发单击下拉选项。 有什么办法可以做到这一点吗?
要触发它,就像用户点击了该项目一样,您必须使用您的数据更新字段中的值。
简短的回答就像谢尔盖·斯塔蒂瓦(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');
您应该调用change
事件来应用新值
$('.typeahead').val(Your value).trigger('change');