[英]How to display typeahead.js dropdown data on button click event?
I'm trying to find a way to make use of bootstrap-tagsinput library with Bootstrap-3-Typeahead to a create a tagging input field with combo box functionality. 我试图找到一种方法,结合使用Bootstrap-3-Typeahead的bootstrap-tagsinput库来创建具有组合框功能的标记输入字段。 So then the user can see the available items without getting it when typing. 因此,用户可以在键入时看到可用项目而无需获取。
I'm in the beginning of creating it and so far I was able to run the tags-input
with typeahead
safely. 我正在开始创建它,到目前为止,我已经可以安全地使用typeahead
运行tags-input
了。 So now it will show all its data when the text field get focused. 因此,当文本字段成为焦点时,它将显示所有数据。
Later I found that it's happening by triggering the focus
function of it. 后来我发现它是通过触发它的focus
功能而发生的。 But I can't trigger it the way I tried to. 但是我无法以我尝试的方式触发它。
How can I show the dropdown list after a button click event happens? 发生按钮单击事件后如何显示下拉列表?
This is my code so far: 到目前为止,这是我的代码:
<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>
Any suggestions? 有什么建议么?
You can do it by trigger keyup
on the hidden <input>
element : 您可以通过在隐藏的<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');
});
The only "but" here is : You must comment out one line [ #408
] in the typeahead source to prevent it from closing on mouseover, due to the mismatch between focused
and shown
that occured when we tricked the typeahead to open : 这里唯一的“但是”是:您必须注释掉typeahead源中的一行[ #408
]以防止它在鼠标悬停时关闭,这是由于我们欺骗了typeahead打开时出现的focused
与shown
之间不匹配:
mouseleave: function (e) {
this.mousedover = false;
//if (!this.focused && this.shown) this.hide(); <-- line #408
}
demo -> http://plnkr.co/edit/TU7HUS49mck7BMJhMd1B?p=preview 演示-> http://plnkr.co/edit/TU7HUS49mck7BMJhMd1B?p=preview
Trick to have "unlimited" items with scrollable menu : 欺骗具有可滚动菜单的“无限”项目:
.dropdown-menu {
overflow-y : scroll;
max-height: 250px !important;
}
in options 在选项
items : 1000,
http://plnkr.co/edit/7yDk829M3wavyn1oJoAE?p=preview http://plnkr.co/edit/7yDk829M3wavyn1oJoAE?p=preview
Does $(".typeahead").focus();
是否$(".typeahead").focus();
not work? 不行?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.