嗨我在twitter bootstrap中使用typeahead。我在这里发现的是,在自动完成下拉列表中,它默认选择第一个选项。我的要求是,最初它应该没有任何选择,只有当我按导航键(向上或向下)或我将鼠标悬停在它上面时,它才会转到第一个选项。是否可以使用typeahead。
来自Twitter的更强大的typeahead project没有这个问题。我不明白为什么这个项目没有直接包含在Twitter Bootstrap中。
你可以看到here some examples。
为了避免默认情况下通过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
});
您可以简单地覆盖bootstrap typeahead render方法来实现此目的。来自原始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
};
虽然不完全是你问的,但有一个很好的解决方法here。基本上,您将用户插入的文本设置为第一个预先输入建议。正如链接的回答所提到的,这与您从Chrome地址栏获得的行为相同。
1-Open bootstrap-typeahead.js和comment 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
}
我找到了一个解决方案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而不是最初选择任何东西
默认情况下,“typeahead-focus-first”设置为true,只需通过typeahead-focus-first =“false”将其设置为false。