21

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

Javascript：

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

10 回答 10

17

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

此更新将允许 minLength 为零以启用 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;
}
于 2012-12-19T00:13:38.703 回答
3

从 Github获取最新版本( bootstrap3-typeahead.js v4.0.2)脚本：下载

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

于 2017-07-28T14:37:48.317 回答
2

对我来说，$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"/>
于 2017-02-20T18:35:09.213 回答
1

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

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

于 2012-10-26T19:38:05.193 回答
1

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

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

于 2020-12-12T06:35:59.837 回答
0

检查来自theophraim 的 typeahead 的这个pull request，他已经包含了这个功能，但是它还没有被合并。

于 2014-01-03T07:57:38.650 回答
0

这是我的解决方案：

  • 初始化预输入

    $("#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('');
});
于 2016-07-29T10:27:38.103 回答
0

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

如 jharding 所述，您会发现：

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

尽管 pricey 之前的消息显示了如何实现它。

你也可以去获取更新的版本https://github.com/bassjobsen/Bootstrap-3-Typeahead

于 2016-01-14T09:54:14.063 回答
0

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

showHintOnFocus:true
于 2015-07-23T08:22:19.697 回答
0

WORKS 对于 bootstrap-3-typeahead，最简单的方法就是模拟一个带有退格键（chr8）的键位。

$("#people_lookup").typeahead({
    source: people_list,
    minLength: 0
}).on('focus', function() {
    $(this).trigger(jQuery.Event('keyup', {which: 8}));
});
于 2018-10-08T21:36:01.233 回答