29

我希望使用 Twitter Bootstrap TypeAhead 使用具有自动完成功能的下拉列表/< 选择 > HTML 标记行为。这里的链接实现了组合框的功能，用户也可以提供自己的输入。我想限制用户只能从提供的选项中进行选择。有什么方法可以调整 Twitter Bootstrap TypeAhead 插件来模拟具有自动完成功能的下拉列表/标签的行为。

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

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

3 回答 3

24

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

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

现场示例（引导程序 3）

于 2013-03-02T19:11:35.483 回答
10

对 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/

于 2012-12-11T08:45:59.037 回答
6

这确实是可能的 - 甚至非常简单 -如果您愿意不显示突出显示的匹配结果，则无需更改 typeahead javascript / 使用更改的代码。

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/上的工作代码/示例

于 2012-11-13T16:57:26.993 回答