ドロップダウンリストの項目があまりに置いときにテキスト入れを用意しておいて絞り込み検索を行いたいと言った時があります。 その時は以下の様にすればいいでしょう
JavaScript(jquery)でドロップダウンリストの絞り込みを行うのデモ
<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">絞込検索欄
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);
});