Twitter Typeahead以编程方式选择并触发选择

时间:2014-03-03 07:13:16

标签: typeahead.js twitter-typeahead

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

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

但两者都只选择了我想要的选项,它没有触发点击下拉选项。有没有办法做到这一点?

2 个答案:

答案 0 :(得分:3)

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

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

一个案例用法示例的长答案就在这里,我添加了一个使用Bloodhound的sollution,但你问题的核心并不复杂,我只是希望它可以帮助将来的某个人,所以它就在这里。

让我们假设你有一个这样的模板:

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');

答案 1 :(得分:-1)

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

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