Twitter Bootstrap TypeAhead 像下拉列表/选择具有自动完成功能的标签一样工作答案

【问题标题】：Twitter Bootstrap TypeAhead to work like DropDown List / Select Tag with Autocomplete FeatureTwitter Bootstrap TypeAhead 像下拉列表/选择具有自动完成功能的标签一样工作
【发布时间】：2017-12-28 22:50:42
【问题描述】：

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

我在发帖前已经提到了以下问题

Adding a dropdown button to Twitter bootstrap typeahead component

【问题讨论】：

你看过Chosen 吗？不是 Twitter Bootstrap，但也许是一个替代方案？
@Sherbrow +1。但我正在使用HandsOnTable，它使用 TB Typeahead，所以我必须使用 TypeAhead Only 找到解决方案

标签： javascript jquery twitter-bootstrap typeahead

【解决方案1】：

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

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

Live Example（引导程序 3）

【讨论】：

任何使用默认 ASP.NET Web 表单模板 (VS2013) 的人，Site.css 中有一条规则为 input 元素设置 max-width: 280px;，如果它们的话，你的组合框看起来很难看'大于 280 像素。

【解决方案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/

【讨论】：

如果您选中if($input.data('typeahead').shown == true) { // hide } else { //show }，您可以将 showAll 变成一个切换按钮。
好的，对这段代码进行了更多改进，以保留突出显示和不区分大小写的搜索：jsfiddle.net/kappamax/XKnfX我希望对其他人有所帮助。

【解决方案3】：

这确实是可能的 - 甚至非常简单 - 无需更改预先输入的 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/的工作代码/示例

【讨论】：

JSFiddle 不再有效，顺便说一句