Bootstrap Typeahead - 不要自动选择第一项？答案

【问题标题】：Bootstrap Typeahead - don't autoselect first item?Bootstrap Typeahead - 不要自动选择第一项？
【发布时间】：2016-12-01 22:00:35
【问题描述】：

我正在使用this fork of the Twitter Bootstrap typeahead library，它允许异步数据源以及onselect 事件。到目前为止，它对我来说工作得非常好，但是当用户跳出该字段（即没有主动选择下拉条目）时，会触发 onselect 事件（在我的情况下，它将用户重定向到另一个页面）。如果用户不点击，有什么办法可以阻止 onselect 事件被触发？到目前为止，这是我所得到的（在 CoffeeScript 中）：

$(document).ready ->
  $('#inspection_name').typeahead(
    source: (typeahead, query) ->
      $.ajax(
        url: "/inspections/search.json?name="+query
        success: (data) =>
          return_list = []
          $(data.results.inspections).each ->
            return_list.push("<span data-url='" + this.uri + "/edit'>" + this.name + ", " + this.town + "</span>") 

          typeahead.process(return_list)
      )

    onselect: (obj) =>
      window.location.href = $(obj).attr("data-url")
  )

【问题讨论】：

我现在实际上已经回答了我自己的问题。我对原始 Gist 进行了小幅编辑，以停止选项卡时的默认行为。 You can see my adjustments, together with a Diff here
谢谢，Gist 真的很有用。如果您将评论变成答案，我会投票赞成。

标签： javascript coffeescript twitter-bootstrap typeahead

【解决方案1】：

对于默认的 Bootstrap，这将起作用：

$.fn.typeahead.Constructor.prototype.render = function (items) {

var that = this;

items = $(items).map(function (i, item) {
  i = $(that.options.item).attr('data-value', item);
  i.find('a').html(that.highlighter(item));
  return i[0];
});

this.$menu.html(items);
return this;
};

在包含 bootstrap.(min.)js 之后的某个地方

【讨论】：

感谢您，我已经对其进行了扩展，添加了一些技巧以使 tab 键也可以在选项中循环：gist.github.com/peterschilling/5118516
我使用的是标准的、默认的 Bootstrap，除了它还引入了一个错误，当我点击“ENTER”键时，它不再执行搜索（我必须手动单击提交按钮我已经到位）。
刚刚找到这个链接 (bibwild.wordpress.com/2013/04/04/…)，它解释了我发现的上述问题以及如何正确解决它。

【解决方案2】：

最后，我回答了我自己的问题，并将调整放在这个 Gist 中：

https://gist.github.com/1977953

【讨论】：

查看我的answer to a similar SO-question 以获取其他解决方案。

【解决方案3】：

你可以在 angular-bootstrap typehead 中设置属性

typeahead-focus-first="false"

类似的选项可用于 jQuery

【讨论】：

【解决方案4】：

所有功劳都应该归于@jrochkind，但我想把来自Bibliographic Wilderness: Overriding bootstrap typeahead to not initially select 的答案放在这里更清楚。

在bootstrap.js之后添加这个：

/**
 * Makes it so the first typeahead result isn't auto selected
 *
 * @author Jonathan Rochkind
 * @url http://bibwild.wordpress.com/2013/04/04/overriding-bootstrap-typeahead-to-not-initially-select/
 */
$.fn.typeahead.Constructor.prototype.select = function() {
    var val = this.$menu.find('.active').attr('data-value');
    if (val) {
        this.$element
            .val(this.updater(val))
            .change();
    }
    return this.hide()
};
var newRender = function(items) {
    var that = this

    items = $(items).map(function (i, item) {
        i = $(that.options.item).attr('data-value', item);
        i.find('a').html(that.highlighter(item));
        return i[0];
    });

    this.$menu.html(items);
    return this;
};
$.fn.typeahead.Constructor.prototype.render = newRender;

【讨论】：