Twitter Typeahead编程选择和触发选中。

Question

我希望实现这样的功能：如果我点击一个DOM元素，它应该自动填充一个带有指定值的typeahead，并且它应该触发相同的typeahead:selected事件。

我找到了许多与此相关的查询，答案是jQuery#typeahead('val', val)或jQuery#typeahead('setQuery', myQuery)

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

- Rahul Patil

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

- Vinicius Vieira

Answer 2

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

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

- Sergey Stativa

---

请简要解释一下您的解决方案，并用代码块包装。 - Rey Libutan