0

ユーザーがドロップダウンリストを開いてから、数文字を入力して正しいアイテムにジャンプできるようにするにはどうすればよいですか？フォーマットが固​​定されており、そのままでは検索できないため（すべて開いた括弧で始まる）、独自の検索ロジックを実装する必要がありますが、動作をフックする方法がわかりません。Jqueryが推奨されますが、クロスブラウザーで機能するものであれば何でもかまいません。

例：

（AABE）エイブルエアコン

（BAE）樹皮空気装置

「ba」と入力すると、2番目のエントリにジャンプします。

ありがとう！

4

1 に答える 1

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');     
    }        
});​
于 2012-09-17T17:50:25.990 に答える