twitter-bootstrap Bootstrap - 在焦点上显示所有 Typeahead 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12827483/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap - show all Typeahead items on focus
提问by user1736062
I'd like to show all Typeahead items when the text-input (id="Questions") get focus. How can I do it?
当文本输入 (id="Questions") 获得焦点时，我想显示所有 Typeahead 项目。我该怎么做？
Javascript:
Javascript：
function SetTypeahead() {
$("#Questions").typeahead({
minLength: 0,
source: [
"Q1?",
"Q2?",
"Q3?",
"@4?"
]
});
}
回答by user1893029
Get the latest bootstrap typeahead plugin v2.1.2 at https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js
在https://raw.github.com/michaelcox/bootstrap/6789648b36aedaa795f1f5f11b4da6ab869f7f17/js/bootstrap-typeahead.js获取最新的 bootstrap typeahead 插件 v2.1.2
This update will allow minLength of zero to enable show all for typeahead
此更新将允许 minLength 为零以启用全部显示以进行提前输入
<input id="typeaheadField" name="typeaheadField" type="text" placeholder="Start Typing">
$("#typeaheadField").typeahead({
minLength: 0,
items: 9999,
source: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado", "Oregon"]
});
Then you have to attach the onFocus event to your element, because it's not defined by the plugin:
然后你必须将 onFocus 事件附加到你的元素上，因为它不是由插件定义的：
$("#typeaheadField").on('focus', $("#typeaheadField").typeahead.bind($("#typeaheadField"), 'lookup'));
it's a also a good idea to overwrite the bootstrap typeahead css class locally to set max-height and vertical scroll for the results in case there are too many results.
在本地覆盖 bootstrap typeahead css 类以设置结果的最大高度和垂直滚动也是一个好主意，以防结果过多。
.typeahead {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
回答by user2325333
For me, the $viewValue was null upon selection which was preventing the list from displaying. My solution was to set the filter to an empty string when $viewValue was null.
对我来说，选择时 $viewValue 为空，这阻止了列表显示。我的解决方案是在 $viewValue 为空时将过滤器设置为空字符串。
<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"/>
回答by Neeraj Singh
Get the latest version(bootstrap3-typeahead.js v4.0.2) script from Github:Download
从 Github获取最新版本( bootstrap3-typeahead.js v4.0.2)脚本：下载
Html Code:
html代码：
<input data-provide="typeahead" id="q" type="text" value="" />
Working JavaScript:
工作 JavaScript：
// autocomplete input text
$('#q').typeahead({
// your json data source
source: [your json or object here],
// on click list option set as text value
autoSelect: true,
// set minlength 0 to show list on focus
minLength: 0,
// set no of items you want here
items: 20,
// set true if want to list option on focus
showHintOnFocus: true
});
Official Document:Bootstrap-3-Typeahead
回答by DrCorduroy
There is a solution to this over on the bootstrap github:
https://github.com/twitter/bootstrap/pull/5063
在 bootstrap github 上有一个解决方案：https:
//github.com/twitter/bootstrap/pull/5063
Edit: That link is dead, use the link that Andrew posted: https://github.com/ptnplanet/Bootstrap-Better-Typeahead
编辑：该链接已失效，请使用 Andrew 发布的链接：https: //github.com/ptnplanet/Bootstrap-Better-Typeahead
回答by Paully
WORKS For bootstrap-3-typeahead, the easiest is just to simulate a keyup with backspace (chr8) on focus.
WORKS 对于 bootstrap-3-typeahead，最简单的方法是模拟带有退格键 (chr8) 的键控。
$("#people_lookup").typeahead({
source: people_list,
minLength: 0
}).on('focus', function() {
$(this).trigger(jQuery.Event('keyup', {which: 8}));
});
回答by Tushar Sonawane
Check this pull requestfrom theophraim's typeahead, he has included this functionality, but it is yet to be merged.
检查来自theophraim 的 typeahead 的这个拉取请求，他已经包含了这个功能，但它还没有被合并。
回答by Raúl Martín
The last version v3.1.0of typeahead had an explicit option
v3.1.0typeahead的最后一个版本有一个明确的选项
showHintOnFocus:true
回答by eton_ceb
There is a closed issue about it on typeahead github at the following link: https://github.com/twitter/typeahead.js/issues/462
在以下链接的 typeahead github 上有一个关于它的封闭问题：https: //github.com/twitter/typeahead.js/issues/462
You will find out that, as described by jharding:
你会发现，正如 jharding 所描述的：
"typeahead.js is meant to complement search boxes that are powered by, for all intents and purposes, an infinite dataset. The sort of functionality proposed here isn't really a great fit for what we want typeahead.js to be. "
“typeahead.js 旨在补充由无限数据集提供支持的搜索框。这里提出的功能类型并不是我们想要的 typeahead.js 的理想选择。”
Though a previous message by pricey shows how you can implement it.
尽管 pricey 的先前消息显示了您可以如何实施它。
You can also go for more recent version https://github.com/bassjobsen/Bootstrap-3-Typeahead
您还可以使用更新的版本https://github.com/bassjobsen/Bootstrap-3-Typeahead
回答by user1796655
Here is my solution:
这是我的解决方案：
Init typeahead
$("#FinalGrades", context).typeahead({ minLength: 0, items: 10, scrollBar: true, source: finalGrades });
Trigger textbox event
$("#FinalGrades", context).on("keyup focus", function (e) { var that = $(this); if (that.val().length > 0 || e.keyCode == 40 || e.keyCode == 38) return; that.select(); var dropDown = that.next('.dropdown-menu'); dropDown.empty(); $("#FinalGrades", context).val(qualificationNames[0]); that.trigger('keyup'); $.each(finalGrades, function (index, value) { var item = '<li data-value="' + value + '" class=""><a href="#">' + value + '</a></li>'; dropDown.append(item); }); that.val(''); });
初始化输入
$("#FinalGrades", context).typeahead({ minLength: 0, items: 10, scrollBar: true, source: finalGrades });
触发文本框事件
$("#FinalGrades", context).on("keyup focus", function (e) { var that = $(this); if (that.val().length > 0 || e.keyCode == 40 || e.keyCode == 38) return; that.select(); var dropDown = that.next('.dropdown-menu'); dropDown.empty(); $("#FinalGrades", context).val(qualificationNames[0]); that.trigger('keyup'); $.each(finalGrades, function (index, value) { var item = '<li data-value="' + value + '" class=""><a href="#">' + value + '</a></li>'; dropDown.append(item); }); that.val(''); });
