Bootstrap - 显示焦点上的所有Typeahead项目

Question

当文本输入(id ="Questions")获得焦点时,我想显示所有Typeahead项目.我该怎么做？

使用Javascript:

function SetTypeahead() {
    $("#Questions").typeahead({
        minLength: 0,
        source: [
                "Q1?",
                "Q2?",
                "Q3?",
                "@4?"
        ]
    });
}

Answer 1

通过https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js获取最新的bootstrap typeahead插件v2.1.2

此更新将允许minLength为零以启用show all for typeahead

<input id="typeaheadField" name="typeaheadField" type="text" placeholder="Start Typing">

$("#typeaheadField").typeahead({
                        minLength: 0,
                        items: 9999,
                        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]    
                    });

然后你必须将onFocus事件附加到你的元素,因为它没有被插件定义:

$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));

在本地覆盖bootstrap typeahead css类以设置结果的最大高度和垂直滚动也是一个好主意,以防结果太多.

.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}

Answer 2

bootstrap github 上有一个解决方案： https://github.com/twitter/bootstrap/pull/5063

编辑：该链接已失效，请使用安德鲁发布的链接： https: //github.com/ptnplanet/Bootstrap-Better-Typeahead