jQueryで指定した文字列でドロップダウンの項目を動的に絞り込むサンプルを書いた

■長いドロップダウンリストのユーザビリティ向上のために

たくさんデータが存在するドロップダウンリストは下に長くなってしまい、選択するのが大変になってしまいます。ユーザビリティも低下してしまいがちです。そんな悩みを解決するために、テキストリアに文字を入力するとある程度ドロップダウンリストの項目を動的に絞り込めるサンプルを書きました。

テキストエリアに文字列を入れると、そのテキストが含まれている選択肢のみ表示されるようになります。

以下、サンプルコードです。デモはこちらです。

<html>
<head>
    <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        $(document).ready(function(){

            // まずは対象のセレクトボックスの内容一覧を取得する
            var dataList = {};
            selectObject = $('#targetOptions').children();
            for(i = 0; i < selectObject.length; i++) {
                targetObject = selectObject.eq(i);
                dataList[targetObject.val()] = targetObject.text();
            }

            console.log(dataList);

            // テキストエリアが変更された時の動きを登録
            $('#targetText').change(function(){
                console.log($(this).val());

                targetString = $(this).val();

                // 絞込開始
                if(targetString == '') {
                    // 絞込文字列が空の時は全部表示する。
                    $('#targetOptions > option').remove();

                    for ( var key in dataList ) {
                        text = dataList[key];
                        $('#targetOptions').append($('<option>').html(text).val(key));
                    }
                } else {
                    // 絞込文字列が設定されているときは部分一致するもののみを表示する
                    $('#targetOptions > option').remove();
                    for ( var key in dataList ) {
                        text = dataList[key];
                        if(text.indexOf(targetString) != -1) {
                            $('#targetOptions').append($('<option>').html(text).val(key));
                        }
                    }
                }

            });
        });
</script>
</head>
<body>
<input name="targetText" class="form-control" type="text" id="targetText">

    <select name="targetOptions" class="form-control form-8" id="targetOptions">
        <option value="1">テスト</option>
        <option value="2">ほげほげ</option>
        <option value="3">ああああああ</option>
        <option value="4">メンチカツ</option>
        <option value="5">カレーライス</option>
        <option value="6">カレーうどん</option>
    </select>
</body>
</html>

細かい気遣いの積み重ねが、ツールやシステムの使い勝手を向上させていくと思います。ぜひ、参考にしてみてください。