Question

我想要一个DropDown List /＆lt;选择＆gt;使用Twitter Bootstrap TypeAhead的自动完成功能的HTML标记行为。链接here实现了Combo Box的功能，用户也可以提供自己的输入。我想限制用户只从提供的选项中选择。有没有办法调整Twitter Bootstrap TypeAhead插件来模拟具有自动完成功能的DropDown列表/标记的行为。

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

Adding a dropdown button to Twitter bootstrap typeahead component

Answer 1

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

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

Live Example（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/

的工作代码/示例

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

3 个答案: