素のjavascriptでセレクトのフィルタリングを行う実装

イベントトリガーはテキトーですが、こんな感じ。

<script>
var original = new Array();
function filterSelect(obj) {
 // fword → filtered wordの略な
 var fword = obj.value;
 var sel = document.getElementById("target");
 if (original.length == 0) {
  for (var i=0; i < sel.options.length; i++) {
   original[sel.options[i].value] = sel.options[i].text;
  }
 }
 // remove options
 sel.length = null;
 // create new options
 for (var key in original) {
  if (original[key].indexOf(fword) >= 0) {
   var newOpt = document.createElement( "option" );
   newOpt.value = key;
   var optTxt = document.createTextNode( original[key] );
   newOpt.appendChild( optTxt );
   sel.appendChild( newOpt );
  }
 }
}
</script>
<input type="text" onkeyup="filterSelect(this)">
<select id="target">
<option value="1">abcde</option>
<option value="2">cdefg</option>
<option value="3">fghij</option>
<option value="4">jklmn</option>
<option value="5">lmnopq</option>
<option value="6">acfjl</option>
</select>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です