Bootstrap Typeahead：删除第一项的强制选择答案

【问题标题】：Bootstrap Typeahead: Remove forced selection of first itemBootstrap Typeahead：删除第一项的强制选择
【发布时间】：2012-12-26 00:29:48
【问题描述】：

您好，我在 twitter 引导程序中使用 typeahead。我在这里发现的是，在自动完成下拉菜单中，它默认选择第一个选项。我的要求是，最初它应该没有选择任何内容，只有当我按下导航键（向上或向下）或将鼠标悬停在它上面时，它才会进入第一个选项。是否可以使用预输入。

【问题讨论】：

您是否尝试过使用值为 -1 的荧光笔选项？
不，我会试试，让我检查一下。
@Tkingovr 对不起，它不起作用，荧光笔是一个功能，它如何获得价值。
您可以将其作为数据属性 data-highlighter="-1"
@Tkingovr 现在也不工作了。我想通过 data 属性传递它不会完成这项工作，因为我是通过 javascript 做所有事情。

标签： twitter-bootstrap bootstrap-typeahead

【解决方案1】：

为了避免默认情况下通过 typeahead first 选项进行选择，我使用了官方文档中记录的参数：autoSelect。默认情况下它设置为“真”

我的代码：

$('#searchString', this.el).typeahead({
        source: function (query, process) {
            var q = '/autocompleteSearch?searchString=' + query;               

            return $.get(q, function (data) {
                return process(data);
            });
        },
        minLength: 3,
        autoSelect: false
    });

【讨论】：

【解决方案2】：

来自 Twitter 的更强大的typeahead project 没有这个问题。我不明白为什么这个项目没有直接包含在 Twitter Bootstrap 中。

你可以看到here some examples。

【讨论】：

typeahead.js.org/examples 是更新/维护的代码库，它从 twitter typeahead 分叉出来，多年未维护。

【解决方案3】：

您可以简单地覆盖引导输入预渲染方法来实现这一点。来自原始 typeahead 插件的 items.first().addClass('active') 行将在此覆盖中删除。

$.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
};

【讨论】：

【解决方案4】：

虽然不完全符合您的要求，但有一个很好的解决方法here。基本上，您将用户插入的文本放入第一个预先输入的建议中。正如链接的答案所提到的，这与您从 Chrome 地址栏中获得的行为相同。

【讨论】：

感谢您的建议。我同意它没有回答确切的问题，但它最终成为我的最佳解决方案
@DerekWhite 你是如何解决这个问题的？哪里有例子？谢谢！

【解决方案5】：

1-打开 bootstrap-typeahead.js 并评论 items.first().addClass('active')

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]
  })

//  items.first().addClass('active')
  this.$menu.html(items)
  return this
}

【讨论】：

【解决方案6】：

我找到了一个解决方案here，首先添加这个就可以了：

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;

$.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()
};

它会覆盖引导程序预先输入以不最初选择任何内容

【讨论】：

【解决方案7】：

默认情况下“typeahead-focus-first”设置为 true，只需通过 typeahead-focus-first="false" 将其设置为 false。

【讨论】：