首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap -在焦点上显示所有Typeahead项

Bootstrap -在焦点上显示所有Typeahead项
EN

Stack Overflow用户
提问于 2012-10-11 04:07:15
回答 6查看 36.7K关注 0票数 21

当文本输入(id=“问题”)获得焦点时,我想显示所有的Typeahead项。我该怎么做呢?

Javascript:

代码语言:javascript
复制
function SetTypeahead() {
    $("#Questions").typeahead({
        minLength: 0,
        source: [
                "Q1?",
                "Q2?",
                "Q3?",
                "@4?"
        ]
    });
}
EN

回答 6

Stack Overflow用户

发布于 2012-12-19 08:13:39

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

此更新将允许零值的minLength为typeahead启用show all

代码语言:javascript
复制
<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事件附加到您的元素,因为它不是由插件定义的:

代码语言:javascript
复制
$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));

这也是一个好主意,在本地重写bootstrap typeahead类,为结果设置max-height和垂直滚动,以防结果太多。

代码语言:javascript
复制
.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
票数 17
EN

Stack Overflow用户

发布于 2017-02-21 02:35:09

对我来说,$viewValue在选择时为空,这阻止了列表的显示。我的解决方案是在$viewValue为null时将过滤器设置为空字符串。

代码语言:javascript
复制
<input type="text"
  ng-model="gear.Value"
  uib-typeahead="gear as gear.Name for gear in gears | filter:$viewValue || ''"
  typeahead-show-hint="true"
  typeahead-min-length="0"
  typeahead-show-hint="true"
  typeahead-editable='false'
  typeahead-focus-first='false'
  class="form-control"
  name="gear"
  ng-required="true"/>
票数 2
EN

Stack Overflow用户

发布于 2020-12-12 14:36:00

对我来说,工作代码如下所示:

代码语言:javascript
复制
var typeHeadField = $("#typeaheadField");
typeHeadField.typeahead({
                        minLength: 0,
                        items: 9999,
                        source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]    
                    });
typeHeadField.on('focus', function() {
 $(this).trigger('propertychange');
});

换句话说,只要在你想要的事件上触发事件'propertychange'即可。此时将打开Typehead自动完成功能。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12827483

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档