Twitter bootstrap 引导-显示焦点上的所有提前输入项

当文本输入id=问题获得焦点时，我希望显示所有提前输入项。 我怎么做

Javascript:

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

---

在引导github上有一个解决方案：

---

编辑：该链接已失效，请使用Andrew发布的链接：

获取最新的引导typeahead插件v2.1.2，网址为

此更新将允许minLength为零，以启用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"]    
                    });

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

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

从中选中此项，他已包含此功能，但尚未合并。

typeahead的最新版本v3.1.0有一个明确的选项

showHintOnFocus:true

---

在typeahead github上有一个关于它的已关闭问题，链接如下：

你会发现，正如贾丁所描述的：

js旨在补充由无限数据集提供支持的搜索框。这里提出的那种功能实际上并不适合我们想要的typeahead.js

尽管Pricy之前的一条消息显示了如何实现它

您也可以选择更新的版本

以下是我的解决方案：

Init 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"]    
                    });

$FinalGrades，context.typeahead{ 最小长度：0， 项目：10， 滚动条：对， 资料来源：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('');
});

---

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

<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"/>

从Github获取最新版本的bootstrap3-typeahead.js v4.0.2脚本：

Html代码：

---

官方文件：

适用于bootstrap-3-typeahead，最简单的方法就是模拟焦点上有退格chr8的键控

$("#people_lookup").typeahead({
    source: people_list,
    minLength: 0
}).on('focus', function() {
    $(this).trigger(jQuery.Event('keyup', {which: 8}));
});

---

对我来说，工作代码如下所示：

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”。“打印头自动完成”将打开。

那么，你的问题是什么？什么不起作用？嗨，约翰，当我开始打字时，它起作用了，但不仅仅是集中注意力。其目的是显示焦点上的所有选项。我读了这些文章，但没有成功的建议：@JohnSaunders-Hi John，关于上面的文章，我不明白如何实现这些代码：$input.on'focus'，$input.typeahead.bind$input，'lookup'；这是我在拉取请求中使用的链接项目：您提供的链接已失效。适用于我bootstrap-typeahead.js v2.3.2，但当我尝试单击滚动条typeahead时，该项目的URL将消失？我在GitHub上看到的链接只指向版本0.11：嗨，Neeraj，你如何使它可滚动？还有，对焦时，如何自动选择一个？例如，我有一份国家名单。假设文本框中的值为Thailand。当我点击文本框时，它应该马上就去了泰国。如何存档？提前感谢…Hi@Sam，由于您可以查看此链接的可滚动性以及从可用数据中自动选择输入值，当用户停止输入时，它会自动出现。Hi Neeraj，我使用的是Bootstrap-3-Typeahead。我实际上找到了那个链接，但它不适用于Bootstrap-3-Typeahead。我想它不是用于Bootstrap-3-Typeahead的？

$("#people_lookup").typeahead({
    source: people_list,
    minLength: 0
}).on('focus', function() {
    $(this).trigger(jQuery.Event('keyup', {which: 8}));
});

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