Javascript Twitter Bootstrap TypeAhead 像下拉列表/选择标签一样工作，具有自动完成功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11745422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap TypeAhead to work like DropDown List / Select Tag with Autocomplete Feature
提问by Dinesh P.R.
I want to have a DropDown List / < Select > HTML Tag behaviour with AutoComplete Feature using Twitter Bootstrap TypeAhead. The link hereachieves the feature of Combo Box where user can provide his own input also. I want to restrict the User to select only from the option provided. Is there any way to tweek the Twitter Bootstrap TypeAhead Plugin to emulate the behaviour of DropDown List / Tag with Autocomplete Feature.
我想要使用 Twitter Bootstrap TypeAhead 具有自动完成功能的下拉列表/<选择> HTML 标记行为。此处的链接实现了 Combo Box 的功能，用户也可以在其中提供自己的输入。我想限制用户只能从提供的选项中进行选择。有什么方法可以使用 Twitter Bootstrap TypeAhead 插件来模拟具有自动完成功能的下拉列表/标签的行为。
I have referred the Following question before posting
在发布之前我已经提到了以下问题
回答by mike nelson
I just found this awesome plugin that turns a standard SELECT element into very seamless nicely styled combo box using bootstrap typeahead. It looks really good, I'm going to use it on my next project.
我刚刚发现了这个很棒的插件，它使用 bootstrap typeahead 将标准的 SELECT 元素转换为非常无缝、样式精美的组合框。它看起来非常好，我将在我的下一个项目中使用它。
https://github.com/danielfarrell/bootstrap-combobox
https://github.com/danielfarrell/bootstrap-combobox
Live Example(Bootstrap 3)
实时示例（引导程序 3）
回答by d4kris
Tiny improvement to davidkonrads answer to keep the filter functionality when typing.
davidkonrads 的微小改进可以在打字时保留过滤器功能。
$(document).ready(function() {
$("#test").typeahead({
"source": ['Pennsylvania', 'Connecticut', 'New York', 'Maryland', 'Virginia'],
//match any item
matcher: function(item) {
if (this.query == '*') {
return true;
} else {
return item.indexOf(this.query) >= 0;
}
},
//avoid highlightning of "*"
highlighter: function(item) {
return "<div>" + item + "</div>"
}
});
// "select"-button
$(".showAll").click(function(event) {
var $input = $("#test");
//add something to ensure the menu will be shown
$input.val('*');
$input.typeahead('lookup');
$input.val('');
});
});
回答by davidkonrad
That is indeed possible - even very simple - without changing the typeahead javascript / using altered code, IFyou are willing not to show matched results highlighted.
这确实是可能的 - 即使非常简单 - 无需更改预先输入的 javascript / 使用更改的代码，如果您愿意不突出显示匹配的结果。
HTML:
HTML：
<input name="test" id="test"/>
<button id="emu-select" class="btn btn-small" type="button">
<i class="icon-arrow-down"></i>
</button>
script:
脚本：
$(document).ready(function() {
$("#test").typeahead({
"source": ['Pennsylvania','Connecticut','New York','Maryland','Virginia'],
//match any item
matcher : function (item) {
return true;
},
//avoid highlightning of "a"
highlighter: function (item) {
return "<div>"+item+"</div>"
}
});
// "select"-button
$("#emu-select").click(function(){
//add something to ensure the menu will be shown
$("#test").val('a');
$("#test").typeahead('lookup');
$("#test").val('');
});
});
working code / example at jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/
jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/ 的工作代码/示例
