jQueryでリスト表示を絞り込む処理を実装する

JavaScript

リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。

■目次

選択した項目で絞り込み検索をする
複数の項目で絞り込み検索をする
配列を使ってリスト側に複数の値を設定できるようにする

1. 選択した項目で絞り込み検索をする

以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。
デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。

See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen.

設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。
例えばグループAを選択した場合、data-groupの値は「a」なので、リスト表示の中からdata-groupの値が「a」のものだけが絞り込まれます。

<!-- 絞り込み検索部分 -->
<div class="search">
    <span class="search_item is-active" data-group="">ALL</span>
    <span class="search_item" data-group="a">グループA</span>
    <span class="search_item" data-group="b">グループB</span>
    ～ 省略 ～
    <span class="search_item" data-group="h">グループH</span>
</div>

<!-- リスト表示部分 -->
<ul class="list">
    <li class="list_item" data-group="a">ロシア</li>
    <li class="list_item" data-group="c">フランス</li>
    ～ 省略 ～
    <li class="list_item" data-group="c">ペルー</li>
</ul>

絞り込みを解除したい場合、ALLで設定しているようにdata-groupの値を空に設定すればOKです。

※JavaScript部分についてはコード内のコメントで説明していますので、記事内での説明は省略します。

2. 複数の項目で絞り込み検索をする

1つ目は絞り込み項目をクリックして選択する形でしたが、今度はラジオボタンやチェックボックスで絞り込む項目を選択できるパターンです。
デモは食べ物を種類と色で絞り込む実装です。

See the Pen rJLoYq by tam_yi (@tam_yi) on CodePen.

リスト表示部分は1つ目のデモと同様にdata属性を使いますが、絞り込み検索部分はinputのname属性とvalue属性を使って絞り込みを行います。

data属性のdata-XXXXXにあたる部分にname属性の値を、data属性の値にvalue属性の値を設定して、一致するものを絞り込みます。
例えば種類を「野菜」、色を「赤色」を選択した場合、「いちご」のみに絞り込まれます。

<form>
    <div class="search-box">
        <span class="search-box_label">種類:</span>
        <input type="radio" name="kind" value="">ALL
        <input type="radio" name="kind" value="野菜">野菜
        <input type="radio" name="kind" value="果物">果物
    </div>

    <div class="search-box">
        <span class="search-box_label">色:</span>
        <input type="checkbox" name="color" value="赤色">赤色
        <input type="checkbox" name="color" value="緑色">緑色
        <input type="checkbox" name="color" value="黄色">黄色
    </div>
</form>

<ul class="list">
    <li class="list_item" data-kind="野菜" data-color="赤色">いちご 種類: 野菜 色: 赤色</li>
    <li class="list_item" data-kind="野菜" data-color="黄色">かぼちゃ 種類: 野菜 色: 黄色</li>
    ～ 省略 ～
    <li class="list_item" data-kind="果物" data-color="黄色">レモン 種類: 果物 色:黄色 </li>
</ul>

今回の「種類」と「色」の様に、複数の絞り込みグループがある場合はAND検索、チェックボックスを複数選択いている場合はOR検索になります。

3. 配列を使ってリスト側に複数の値を設定できるようにする

2つ目と似ていますが、配列を使ってリスト側の絞り込み項目に複数の値を設定できるようにするパターンです。
デモはTips Noteの記事をカテゴリーとタグで絞り込む実装です。

See the Pen bLeOaR by tam_yi (@tam_yi) on CodePen.

複数の値を設定する場合、配列形式で指定します。
data属性に配列を指定する際の注意点として、data属性の値を「"」ではなく「'」で括り、配列内の値を「"」で括るようにします。(配列ではなく文字列として認識されてしまうため。)

<ul class="list">
    <li class="list_item" data-category='Program' data-tag='["ssh", "mysql"]'>
        <a href="https://www.tam-tam.co.jp/tipsnote/program/post14579.html">SSH のポートフォワーディングを使って MySQL に接続する</a><br>
        Category: Program Tag: ssh,mysql
    </li>
    <li class="list_item" data-category='["ツール", "その他"]' data-tag='["photoshop", "エクステンション"]'>
        <a href="https://www.tam-tam.co.jp/tipsnote/tool/post14513.html">Photoshopのエクステンションを自作する</a><br>
        Category: ツール,その他 Tag: photoshop,エクステンション
    </li>
    ～ 省略 ～
    <li class="list_item" data-category='["HTML・CSS", "殿堂入り"]' data-tag='["Sass", "CSSの設計"]'>
        <a href="https://www.tam-tam.co.jp/tipsnote/html_css/post10205.html">CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える</a><br>
        Category: HTML・CSS,殿堂入り Tag: Sass,CSSの設計
    </li>
</ul>

以上、絞り込み検索の実装方法の紹介でした。