jQueryを使用したテーブルのフィルタ検索を実装してみる(変数で正規表現)

mysqlなどでデータベースのデータを出力する時に
tableタグを利用して、ザ・エクセルみたいなレイアウトをとる時があったりする。

その際、フィルタリング検索をphpで実装しようとすると、
条件をPOSTしてデータベースをselectしなければならないので
割と面倒になったりする。

出力件数がそこまで多くないのであれば、
全件引っ張ったあと、jQueryでフィルタをかけてあげると
いちいち通信する必要もないので楽だったりもします。

検索窓


<input type="text" placeholder="検索する名前を入力" name="search_name">

DB出力部分


<table>
 <tr>
  <th>名前</th>
 </tr>
 <tr class="name">
  <td>太郎</td>
 </tr>
 <tr class="name">
  <td>花子</td>
 </tr>
</table>

jQuery記述



		$(document).ready(function(){
			var cols = $(".name");//全てのtrを取得
			$("input[name='search_name']").on("keydown keyup",function(){
				
				var searchWord = $(this).val();//検索したいワードを取得
				reg = new RegExp(searchWord,"g");//正規表現で変数を扱うための準備
				cols.each(function(i,val){
                                  var col_name = $(val).children("td").text();
					if(col_name.match(reg)){
						$(val).show();//該当項目を表示
					}else{
						$(val).hide();//該当しない項目を非表示
					}
					
				})
				
			});
		})


ミソは正規表現を変数で行うところですね!