input type=searchとdatalistの組み合わせで処理するのが今風
HTML
1<input type="search" list="mylist" name="hoge">
2<datalist id="mylist">
3<option value="a1">
4<option value="aa2">
5<option value="aa3">
6<option value="aaa4">
7<option value="aab5">
8<option value="b6">
9<option value="b7">
10</datalist>
これだけでも入力にあわせた絞込はできるが
ただし、上記だと「b」を入れるとブラウザによっては「b」を含むデータとして
「aab5」もヒットすることがあるので、入力文字からはじまるデータだけ抽出したならこんな感じ
javascript
1$(function(){
2 $('input[type=search]').on('input',function(){
3 var v=$(this).val();
4 $('#'+$(this).attr('list')+" option").prop('disabled',function(){
5 return !$(this).val().match(new RegExp("^"+v));
6 });
7 });
8});
9
追記
念の為javascript版
javascript
1document.addEventListener('input',function(e){
2 var t=e.target;
3 if(t.nodeName=="INPUT" && t.type=="search"){
4 var v=t.value;
5 var l=t.getAttribute('list');
6 Array.prototype.map.call(document.querySelectorAll('#'+l+' option'),function(i){
7 i.disabled=!i.value.match(new RegExp("^"+v));
8 });
9 }
10});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/26 02:30
2017/10/26 02:50
2017/10/26 03:03