Question

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

Answer 1

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

我的代码：

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

Answer 2

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

您可以看到here some examples。

Answer 3

您可以简单地覆盖bootstrap typeahead render方法来实现此目的。原始预先输入插件中的行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
};

Answer 4

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

Answer 5

1-Open bootstrap-typeahead.js 和评论items.first（）。addClass（＆＃39; active＆＃39;）

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
}

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

它会覆盖bootstrap typeahead，最初不会选择任何内容

Answer 7

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

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

7 个答案: