JavaScriptで動的検索を行う場合の処理について

Question

現在ボタンを押すとJavascriptによってテーブルの絞り込みを行う機能があります。
テキストを入力するだけで動的に絞り込みを行うようにしたいのですが、方法がわからず困っています。
ご存知の方良い方法がございましたらご共有をお願いしてもよろしいでしょうか。

<textarea class="form-control" rows="1" name="inputProduct" id="search"></textarea><br>
<input type="button" value="絞り込む" id="narrowdown">

<table  id='Productlist' class="table table-bordered">
        <thead>
                <tr>
                <th>No.</th>
                <th>商品</th>
                </tr>
        </thead>
        <tbody>
                @foreach($Product as $vals)
                <tr>
                <td>{{$No}}</td>
                <td>{{$vals->product}}</td>
                </tr>
                @endforeach
        </tbody>
</table>

$(function(){
	$('#narrowdown').bind("click",function(){
		var re = new RegExp($('#search').val());
		$('#Productlist tbody tr').each(function(){
			var txt = $(this).find("td:eq(1)").html();
			if(txt.match(re) != null){
				$(this).show();
			}else{
				$(this).hide();
			}
		});
	});
});

試したこと
onChange・onKeyUPを使って動かすようにしたいと考えていますが、
よくわからず動作の確認ができませんでした。
ブラウザはIEを使用しています。

<input type="text" onChange="alertValue(this)" />


<input type="text" onKeyUp="alertValue(this)" />

Answer 1

changeイベントだと入力後フォーカス移動したときに発火します。
一文字入力するたびに絞り込みたいということなら、inputイベントですね。

$(function(){
    $('#search').bind("input",function(){
        var re = new RegExp($('#search').val());
        $('#Productlist tbody tr').each(function(){
            var txt = $(this).find("td:eq(1)").html();
            if(txt.match(re) != null){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
    });
});

Comments

[yowayowanitohei]

ご回答ありがとうございます。
Chromeで動作確認できました！
ただIEだと素直に動いてくれませんでした。。。
もう少し修正してみようと思います。

Answer 2

IE対応がけっこう足かせですね（jQueryなら吸収してくれますが）

window.addEventListener('DOMContentLoaded',function(){
  document.querySelector('#search').addEventListener('input',function(e){
    const v=e.target.value.trim().split(/\s+/);
    var reg=new RegExp("^("+v.join("|")+")$");
    [].forEach.call(document.querySelectorAll('#Productlist tbody tr td:first-child'),function(x){
      const tr=x.parentNode;
      tr.style.display="none";
      if(reg.test(x.textContent)) tr.style.display="";
    });
  });
});

Comments

[yowayowanitohei]

ご回答（ご解答？）ありがとうございます。
IEでも動作できそうです！バッチリ動いているのですがIE不安なのでもう少しちゃんと調べて問題ないか確認してみます。
またご機会がございましたらどうぞよろしくお願いします。

[yambejp]

ちなみに正規表現で処理している関係でワイルドカードが判定されてしまいます
正規表現の特殊文字を弾きたい場合は適正なエスケープ処理が必要です

Answer 3

「textarea jquey onChange bind」とかでググると出てくるかと思いますが、下記の記事がまさにやりたいことを表しているかと思います。

How can I bind to the change event of a textarea in jQuery?

もともと#narrowdownのclickイベントでやっていた事を、上記の内容を参考に#searchのonChangeイベントで実行してみてはいかがでしょうか？

Comments

[yowayowanitohei]

ご回答ありがとうございます。
フォーカスが外れた時になってしまうので、今回はonKeyUpで実装したいと思います。
参考になるサイトのご共有ありがとうございました。
またご機会がございましたらどうぞよろしくお願い致します。