我想要一个下拉列表/ <选择> HTML标记行为与自动完成功能使用Twitter引导TypeAhead。链接here实现了Combo Box的功能，用户也可以在其中提供自己的输入。我想限制用户只能从提供的选项中进行选择。有什么办法来推特Twitter Bootstrap TypeAhead插件来模拟DropDown List/Tag与自动完成功能的行为。Twitter引导程序类型前工作，像下拉列表/选择标记与自动完成功能
我也提到了以下问题发布
这的确是可能的前 - 即使是很简单 - 不改变预输入的JavaScript /使用改变代码，IF你愿意不显示突出显示的匹配结果。
HTML：
<input name="test" id="test"/>
<button id="emu-select" class="btn btn-small" type="button">
<i class="icon-arrow-down"></i>
</button>
脚本：在的jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/
微小的改进，以davidkonrads
$(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('');
});
});
工作代码/示例答案打字时，以保持过滤功能。
$(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('');
});
});
找到解决方案'）.shown == true）{// hide} else {// show}'您可以将showAll转换为切换按钮。 – gawpertron 2013-01-21 15:42:13
好吧，对这段代码进行更多的改进，以保留突出显示和不区分大小写的搜索：http://jsfiddle.net/kappamax/XKnfX/我希望能帮助别人。 – KappaMax 2013-02-11 06:10:07
我刚刚发现这个真棒插件使用引导键盘缓冲是把一个标准的SELECT元素成非常漂亮的无缝风格的组合框。它看起来非常好，我将在下一个项目中使用它。
https://github.com/danielfarrell/bootstrap-combobox
Live Example（引导3）
你有没有看[拣选（http://harvesthq.github.com/chosen/）？不是Twitter的Bootstrap，但也许是另一种选择？ – Sherbrow 2012-07-31 19:30:33
@Sherbrow +1。但我正在使用[HandsOnTable]（http://warpech.github.com/jquery-handsontable），它使用TB Typeahead，因此如果您检查'if（$ input.data（'typeahead'），我必须使用TypeAhead仅 – 2012-08-01 04:35:32