Twitter Bootstrap TypeAhead可以像DropDown List/Select Tag with Autocomplete Feature一样工作

Question

我希望使用Twitter Bootstrap TypeAhead具有自动完成功能的DropDown列表/ <选择> HTML标记行为.此处的链接实现了Combo Box的功能,用户也可以提供自己的输入.我想限制用户只从提供的选项中选择.有没有办法调整Twitter Bootstrap TypeAhead插件来模拟具有自动完成功能的DropDown列表/标记的行为.

我在发布之前提到了以下问题

1. 向Twitter bootstrap typeahead组件添加下拉按钮

Answer 1

我刚刚发现这个很棒的插件,它将标准的SELECT元素转换为使用bootstrap typeahead的非常无缝的漂亮风格的组合框.它看起来非常好,我将在我的下一个项目中使用它.

https://github.com/danielfarrell/bootstrap-combobox

实例(Bootstrap 3)

Answer 2

对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('');
});

});

http://jsfiddle.net/d4kris/5rtGA/3/

Answer 3

这确实是可能的 - 甚至非常简单 - 如果你不愿意改变使用改变的代码的类型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>

脚本:

$(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('');
    });
});

在jsfiddle的工作代码/示例http://jsfiddle.net/davidkonrad/ZJMBE/3/