c# - 按键根据自定义搜索跳转到 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');     
    }        
});​