基于自定义搜索按键跳转到DropDownList中的项目

Question

我怎样才能允许用户打开一个下拉列表，然后输入几个字母来跳转到正确的项目？我需要实现我自己的搜索逻辑，因为格式是固定的，不能按原样搜索(都以一个左括号开头)，但我不确定如何连接行为。Jquery是首选，但是任何可以跨浏览器工作的东西都可以。

示例：

(AABE)能效空调

(BAE)树皮空气设备

键入'ba‘应该跳到第二个条目，依此类推。

谢谢!

Answer 1

在jQuery中，您可以使用keydown事件。可以在这里实时查看以下代码：http://jsfiddle.net/TXZWC/26/

HTML：

<select name="companies">
    <option value="">choose</option>
    <option value="1" data-search-match="AABE">(AABE) Able Air Conditioning</option>
    <option value="2" data-search-match="BAE">(BAE) Bark Air Equipment</option>
</select>

<a id="clear-search" href="#">Clear Search</a>

JS：

 $(document).ready(function(){

   var $select = $('select'),
        searchQuery = '';

    $(document).on('keydown', function (e){

        // get the char value and append to search string
        searchQuery += String.fromCharCode(e.which);

        // unselect previously selected option
        deselectSelectedOption();

        // find matching option                
        var $selected = $select.find('option').filter(function(){            
            return $(this).data('search-match') === searchQuery;
        });

        if($selected){
            $selected.attr('selected', 'true');
        }                      
    });    

     $('#clear-search').click(function(e){
       e.preventDefault();
       searchQuery = '';                        
       deselectSelectedOption();
       $select.find('option').first().attr('selected', 'true');
    });

    function deselectSelectedOption(){
        $select.find('option[selected]').removeAttr('selected');     
    }        
});​