JavaScript(jquery)でドロップダウンリストの絞り込みを行う

ドロップダウンリストの項目があまりに置いときにテキスト入れを用意しておいて絞り込み検索を行いたいと言った時があります。 その時は以下の様にすればいいでしょう

● JavaScriptでドロップダウンリストの絞り込みを行うのデモ

JavaScript(jquery)でドロップダウンリストの絞り込みを行うのデモ

● コード

・ html

<select name="" id="user_list_men" style="margin-bottom: 5px;">
<option value="">===選択してください===</option>
<option value="Craig Ball">Craig Ball</option>
<option value="Barney Bigard">Barney Bigard</option>
<option value="Don Byron">Don Byron</option>
<option value="Evan Christopher">Evan Christopher</option>
</select>
<input type="text" id="user_list_search_men">絞込検索欄

・ JavaScript


class ListChanger {
    constructor(idName) {
        this.selectBox = document.getElementById(idName);
    }
    change(value) {
        const items = this.selectBox.children;
        const reg = new RegExp(".*" + value + ".*", "i");

        let i;

        if ( value === ''){
	        for ( i = 0 ; i < items.length; i++) {
                items[i].style.display = "";
	        }
        	return;
        }

        for ( i = 0 ; i < items.length; i++) {
            if (items[i].textContent.match(reg)) {
                items[i].style.display = "";
            } else {
                items[i].style.display = "none";
            }
            items[i].selected = false;
        }
        // 選択状態にする
        for (i = 0; i < this.selectBox.length; i++) {
            if (this.selectBox[i].textContent.match(reg)) {
                this.selectBox[i].selected = true;
                break;
            }
        }
    }
}

const menObj = new ListChanger('user_list_men');
$("#user_list_search_men").on('input keyup  blur',function() {
    menObj.change(this.value);
});
No.1158
12/15 15:15

edit