Javascript 如何在按钮单击事件上显示typeahead.js下拉数据？

我正试图找到一种方法来利用库来创建一个带有组合框功能的标记输入字段。这样，用户就可以看到可用的项目，而不必在键入时获取它

我刚开始创建它，到目前为止，我能够使用typeahead安全地运行标签输入。现在，当文本字段聚焦时，它将显示所有数据

后来我发现它是通过触发它的聚焦功能来实现的。但我不能用我尝试的方式触发它

按钮单击事件发生后，如何显示下拉列表

这是我目前的代码：

<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>

有什么建议吗？

Does$.typeahead.focus；不工作？

您可以通过在隐藏元素上触发keyup来完成：

$'device'.tagsinput{ 提前打印：{ 资料来源：[“阿姆斯特丹”、“华盛顿”、“悉尼”、“北京”、“开罗”、“柏林”、“斯德哥尔摩”、“哥本哈根”]， 自动选择：false， 最小长度：0 } }; //提前触发打印机 $'myButton'。单击函数{ $.bootstrap标记输入input.val； $.bootstrap标记输入。触发'keyup'； }; 这里唯一的问题是：您必须注释掉typeahead源中的一行[408]，以防止它在鼠标悬停时关闭，因为当我们诱使typeahead打开时，焦点和显示不匹配：

mouseleave：函数e{ this.mousedover=false； //如果！this.focused&&this.show this.hide

使用可滚动菜单设置无限项的技巧：

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

在选项中

items : 1000,

---

我通过触发标记输入添加的输入标记的焦点来实现这一点。$id-of-the-input-added-by-tags-input.focus；但您的建议值得一看。既然您熟悉这一点：有没有办法避免下拉数据按自然顺序排序？这里只显示有限数量的数据。您可以怎么做我显示了“源代码内部”下拉列表中的所有数据。@prime-我对答案进行了大量编辑，我实际上相信你会使用typeahead.js，但你已经使用了旧的2.x typeahead，没有按照问题中的链接进行操作：我正在使用and。没问题吧？@prime，是的-与我在plunkr中的相同。我通过trig成功地做到了这一点将焦点设置为由tagsinput添加的输入标记。$id-of-the-input-added-by-tags-input.focus；