Bootstrap - 在焦点上显示所有 Typeahead 项目答案

【问题标题】：Bootstrap - show all Typeahead items on focusBootstrap - 在焦点上显示所有 Typeahead 项目
【发布时间】：2012-10-10 20:07:15
【问题描述】：

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

Javascript：

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

【问题讨论】：

那么，您的问题是什么？什么不起作用？
嗨，约翰，当我开始打字时，它会起作用，但不仅仅是专注于焦点。这个想法是显示所有选项的焦点。我阅读了这些文章，但没有成功的建议：github.com/twitter/bootstrap/issues/2043 和 github.com/twitter/bootstrap/pull/3941
@JohnSaunders - 嗨约翰，关于上面的文章，我不明白如何实现这个代码： $input.on('focus', $input.typeahead.bind($input, 'lookup' )));

标签： twitter-bootstrap typeahead

【解决方案1】：

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

此更新将允许 minLength 为 0 以启用 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;
}

【讨论】：

为我工作（bootstrap-typeahead.js v2.3.2）但是当我尝试点击滚动条时 typeahead 消失了。

【解决方案2】：

获取最新版本（bootstrap3-typeahead.js v4.0.2）来自 Github 的脚本：Download

HTML 代码：

<input data-provide="typeahead" id="q" type="text" value="" />

工作 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
});

官方文档： Bootstrap-3-Typeahead

【讨论】：

嗨 Neeraj，你如何让它可滚动？另外，当对焦时，如何自动选择一个？例如，我有一个国家列表。假设文本框中的值是 Thailand。当我单击文本框时，它应该会立即转到 Thailand。如何存档？在此先感谢...
嗨@Sam，对于可滚动，您可以检查此stackoverflow.com/questions/33565799/… 链接，对于从可用数据中自动选择输入值，它会在用户停止输入时自动出现。
嗨 Neeraj，我正在使用 Bootstrap-3-Typeahead。我实际上找到了该链接，但它不适用于 Bootstrap-3-Typeahead。我以为它不适用于 Bootstrap-3-Typeahead？

【解决方案3】：

对我来说，$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"/>

【讨论】：

【解决方案4】：

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

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

【讨论】：

这是我使用的项目（链接到那个拉取请求）：github.com/ptnplanet/Bootstrap-Better-Typeahead
您提供的链接已失效。

【解决方案5】：

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

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 自动完成功能将打开。

【讨论】：

【解决方案6】：

查看theophraim's typeahead中的pull request，他已经包含了这个功能，但它还没有被合并。

【讨论】：

【解决方案7】：

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

showHintOnFocus:true

【讨论】：

项目的 URL 是什么？我在 GitHub 上看到的链接只有 0.11 版：github.com/twitter/typeahead.js

【解决方案8】：

在 typeahead github 上有一个关于它的已关闭问题，链接如下：https://github.com/twitter/typeahead.js/issues/462

你会发现，正如 jharding 所描述的那样：

“typeahead.js 旨在补充由无限数据集驱动的搜索框。这里提出的功能类型并不适合我们想要的 typeahead.js 。”

虽然之前 pricey 的消息显示了如何实现它。

您也可以选择更新版本https://github.com/bassjobsen/Bootstrap-3-Typeahead

【讨论】：

【解决方案9】：

这是我的解决方案：

初始化预输入

$("#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('');
});

【讨论】：

【解决方案10】：

WORKS 对于 bootstrap-3-typeahead，最简单的方法就是模拟一个键控，退格键 (chr8) 为焦点。

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

【讨论】：