[英]How to display typeahead.js dropdown data on button click event?
我试图找到一种方法,结合使用Bootstrap-3-Typeahead的bootstrap-tagsinput库来创建具有组合框功能的标记输入字段。 因此,用户可以在键入时看到可用项目而无需获取。
我正在开始创建它,到目前为止,我已经可以安全地使用typeahead
运行tags-input
了。 因此,当文本字段成为焦点时,它将显示所有数据。
后来我发现它是通过触发它的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>
有什么建议么?
您可以通过在隐藏的<input>
元素上触发keyup
来实现:
$('#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');
});
这里唯一的“但是”是:您必须注释掉typeahead源中的一行[ #408
]以防止它在鼠标悬停时关闭,这是由于我们欺骗了typeahead打开时出现的focused
与shown
之间不匹配:
mouseleave: function (e) {
this.mousedover = false;
//if (!this.focused && this.shown) this.hide(); <-- line #408
}
演示-> http://plnkr.co/edit/TU7HUS49mck7BMJhMd1B?p=preview
欺骗具有可滚动菜单的“无限”项目:
.dropdown-menu {
overflow-y : scroll;
max-height: 250px !important;
}
在选项
items : 1000,
是否$(".typeahead").focus();
不行?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.