如何在按钮点击事件中显示typeahead.js下拉数据？

Question

我正在尝试找到一种方法来使用带有bootstrap-tagsinput的Bootstrap-3-Typeahead库来创建带有组合框功能的标记输入字段。因此，用户可以在输入时看到可用的项目而无需获取它。

我正处于创建它的开始，到目前为止，我能够安全地运行tags-input typeahead。现在，当文本字段聚焦时，它将显示所有数据。

后来我发现它是通过触发它的focus功能发生的。但我不能按照我的方式触发它。

如何在按钮点击事件发生后显示下拉列表？

到目前为止，这是我的代码：

<script>
$(document).ready(function() {  

    $('#device').tagsinput({
          typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'],
            autoSelect: false,
            showHintOnFocus : true,
            minLength : 0
          }
    });

    $('#myButton').click(function() {
       $(".typeahead").trigger("focus");  // wont work
    });

});
</script> 

<div class="container">
<div class="bs-example">
    City : <input id="device" ></input>
    <button id="myButton" >Show</button>
</div>  
</div>

有什么建议吗？

Answer 1

您可以通过在隐藏的keyup元素上触发<input>来执行此操作：

$('#device').tagsinput({
   typeahead: {
     source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo', 'Berlin', 'Stockholm', 'Copenhagen' ],
     autoSelect: false,
     minLength : 0
   }
});     
//trigger the typeahead
$('#myButton').click(function() { 
   $(".bootstrap-tagsinput input").val('');
   $(".bootstrap-tagsinput input").trigger('keyup');
});

这里唯一的“但是”是：您必须在预先输入来源中注释掉一行[#408]，以防止它在鼠标悬停时关闭，因为focused和{{1}不匹配当我们欺骗typeahead打开时发生的事情：

shown

演示 - ＆gt;的 http://plnkr.co/edit/TU7HUS49mck7BMJhMd1B?p=preview

使用可滚动菜单设置“无限制”项目：

mouseleave: function (e) {
  this.mousedover = false;
  //if (!this.focused && this.shown) this.hide(); <-- line #408
}

选项中的

.dropdown-menu {
    overflow-y : scroll;
    max-height: 250px !important;
}

<强> http://plnkr.co/edit/7yDk829M3wavyn1oJoAE?p=preview

Answer 2

$(".typeahead").focus();不起作用吗？