7

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

4

7 回答 7

7

为了避免默认情况下通过 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
    });
于 2015-08-27T18:07:47.180 回答
2

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

你可以在这里看到一些例子。

于 2013-05-06T12:55:03.187 回答
2

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

$.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
};
于 2013-11-27T07:03:33.083 回答
1

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

于 2013-01-18T10:21:28.227 回答
0

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
}
于 2014-08-26T09:28:03.097 回答
0

我在这里找到了一个解决方案，首先添加这个：

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

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

于 2016-06-13T09:43:35.850 回答
0

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

于 2018-09-18T06:02:27.030 回答