bootstrap 下拉列表获取,在Bootstrap下拉菜单中自动选择

Suppose I have a plain html select tag. If I click on the select box and start typing the first letter of an item then that item gets auto-selected as I type.

I would like the same functionality for a Bootstrap dropdown menu. Right now, it doesn't respond to any letters that a user types. How can I add the auto-select like the select tag has?

Here is an example on Bootply: http://www.bootply.com/126297 .

解决方案

You could use jQuery to attach a keypress handler when the dropdown is shown. Then look through the li items to see if the first letter matches the key that was pressed...

$('#cars').on('shown.bs.dropdown', function () {

var $this = $(this);

// attach key listener when dropdown is shown

$(document).keypress(function(e){

// get the key that was pressed

var key = String.fromCharCode(e.which);

// look at all of the items to find a first char match

$this.find("li").each(function(idx,item){

$(item).removeClass("active"); // clear previous active item

if ($(item).text().charAt(0).toLowerCase() == key) {

// set the item to selected (active)

$(item).addClass("active");

}

});

});

})