twitter-bootstrap – Bootstrap – 显示焦点上的所有类型头项

发布时间：2020-12-18 00:17:03 所属栏目：安全来源：网络整理

导读：当文本输入(id =“问题”)获取焦点时,我想显示所有Typeahead项目. 我该怎么做？使用Javascript： function SetTypeahead() { $("#Questions").typeahead({ minLength: 0,source: [ "Q1?","Q2?","Q3?","@4?" ] });} 解决方法在 https://raw.github.com/mich

当文本输入(id =“问题”)获取焦点时,我想显示所有Typeahead项目.
我该怎么做？

使用Javascript：

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

解决方法

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

此更新将允许最小长度为零以启用全部显示

<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'));

在本地覆盖引导类型头css类也是一个好主意,为结果设置最大高度和垂直滚动,以防结果过多.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!