[jQuery]data属性で簡易的な絞り込み検索を作る

ページ遷移しない絞り込みは便利だなーって時もある

Contents

1 用途とか動作とか
2 data属性について
3 作る
4 使い道とか

用途とか動作とか

要するに。

data属性を振りまくったリスト群があります、data属性に応じたselectを用意します、selectで選んだやつに該当するかどうか判定して表示・非表示を切り替えます、を作る。

ページ遷移不要の検索コンテンツを作れると便利だよねっていう。
表示内容のトータルは、中身はテキストとリンクくらいだから全部読み込んでも重くないよっていう。
ただただ見づらいのを、絞り込みかけてわかりやすくしたいっていう。

classだって複数つけられるからそっちでやってもいいんだけど、スタイル面とかキー自体を分けられる便利さ的にこういうのはdata属性を活用したほうが楽かなって感じで。

data属性について

「data-***=”****”」みたいな感じで任意にいくらでも付けられる。
設定したdata属性は連想配列扱いになるんで、キーを指定したら値を取得できる。

例えば、

<p data-area="tokyo" data-bld="tower" data-start="1958/12/23">東京タワー</p>

1	<p data-area="tokyo" data-bld="tower" data-start="1958/12/23">東京タワー</p>

ってのを作ったとして、

$('p').data('area');
 //tokyo
$('p').data('bld');
 //tower
$('p').data('start');
 //1958/12/23

$('p').data('area');

//tokyo

$('p').data('bld');

//tower

$('p').data('start');

//1958/12/23

こんな感じで拾ってこれる。

作る

HTMLはこんな感じで。

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

<select name="area">
	<option value="">選択</option>
	<option value="tokyo">東京</option>
	<option value="osaka">大阪</option>
	<option value="nagoya">名古屋</option>
	<option value="fukuoka">福岡</option>
	<option value="hokkaido">北海道</option>
	<option value="okinawa">沖縄</option>
</select>

<ul class="area">
	<li data-area="tokyo">東京</li>
	<li data-area="osaka">大阪</li>
	<li data-area="nagoya">名古屋</li>
	<li data-area="fukuoka">福岡</li>
	<li data-area="hokkaido">北海道</li>
	<li data-area="okinawa">沖縄</li>
</ul>

</select>

</ul>

jQueryで組むからからライブラリも読み込ませる事を忘れない。

valueが無いものを選んだら全部表示
valueがあるものを選んだら該当するものだけ表示

をjQueryで書く。

// JavaScript Document
$(function(){

	$('select[name=area]').on('change',function(){
		var valArea = $('select[name=area]').val();
		if(valArea == ''){
			$('ul.area li').slideDown();
		}else{
			$('ul.area li').hide();
			$('ul.area li').filter(function(){
				return($(this).data('area') == valArea);
			}).slideDown();
		}
	});

});

// JavaScript Document

$(function(){

$('select[name=area]').on('change',function(){

var valArea = $('select[name=area]').val();

if(valArea == ''){

$('ul.area li').slideDown();

}else{

$('ul.area li').hide();

$('ul.area li').filter(function(){

return($(this).data('area') == valArea);

}).slideDown();

}

});

slideDown()は好みだからshow()でもfadeIn()でもなんでもいいとして。

リスト内から抽出するんで.filter()を使うことになる。
これのおかげで該当のliが複数あっても対応できる。

一応上から説明すると、

selectを選択した時に発火
選択したoptionのvalueを取得（valArea）
valAreaが空っぽだったら全部表示
valAreaが空っぽじゃなかったら一旦全部非表示にする
valAreaと同じ内容のdata-area（.data(‘area’)）をピックアップして表示する

そんな感じの内容。

以上。

使い道とか

店舗一覧とかFAQとかめっちゃいっぱいある状態で、ただ一覧をぶっこんでも閲覧者からしたらくっそ見づらいんで、カテゴリ分けとかしても絞り込み時点のページ遷移とかだるいんで、だからってフリーワード検索もめんどいから落とし所はこっちで指定するけどまあ使い勝手向上するんじゃねのっていうような時に使う。

ヘッダーメニューに膨大なリストを設置しておきつつもこの機能をセットにしておけば楽やんね、みたいな感じの。