リストを絞り込む処理を実装してみる

2015.10.18

リスト表示している要素をJavaScriptを使って動的に絞り込む処理を実装してみます。

サンプルコード

選択項目から1つを選択すると、それに関連するリストのみの表示に絞り込みます。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<ul class="searchList">
    <li><a href="#all">全て</a></li>
    <li><a href="#dog">イヌ</a></li>
    <li><a href="#cat">ネコ</a></li>
    <li><a href="#monkey">サル</a></li>
    <li><a href="#dolphin">イルカ</a></li>
    <li><a href="#jellyfish">クラゲ</a></li>
    <li><a href="#penguin">ペンギン</a></li>
    <li><a href="#turtle">カメ</a></li>
    <li><a href="#redstart">ジョウビタキ</a></li>
    <li><a href="#myna">九官鳥</a></li>
    <li><a href="#butterfly">蝶</a></li>
    <li><a href="#crocodile">ワニ</a></li>
</ul>
 
<ul class="list">
    <li class="all dolphin">
        <img src="01.jpg" width="240" height="155">
        <p>名前:<span class="name">イルカ</span></p>
    </li>
    <li class="all jellyfish">
        <img src="02.jpg" width="240" height="155">
        <p>名前:<span class="name">クラゲ</span></p>
    </li>
    ・
    ・
    ・
    <li class="all dog">
        <img src="14.jpg" width="240" height="155">
        <p>名前:<span class="name">イヌ</span></p>
    </li>
</ul>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(function() {
    var lists = $('.list li');
    $(document).on('click', '.searchList a', function() {
        // 絞り込みの対象を取得
        var target = $(this).attr('href').replace('#', '');
        lists.each(function(e) {
            // 絞り込み対象の場合は表示
            if($(this).hasClass(target)) {
                $(this).show();
            // 絞り込み対象でない場合は非表示
            } else {
                $(this).hide();
            }
        });
        return false;
    });
});

リスト表示の要素の絞り込みのデモページ
　

サンプルコード2

絞り込み内容を複数選択できるようにしてみます。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<div class="serchBox">
    <select name="type">
        <option value="">種類を選択</option>
        <option value="mammals">哺乳類</option>
        <option value="reptiles">爬虫類</option>
        <option value="birds">鳥類</option>
        <option value="other">その他</option>
    </select>
    <select name="live">
        <option value="">生活を選択</option>
        <option value="water">水中</option>
        <option value="land">陸上</option>
        <option value="water-and-land">水中と陸上</option>
        <option value="sky">空</option>
    </select>
    <select name="color">
        <option value="">色を選択</option>
        <option value="black">黒系</option>
        <option value="white">白系</option>
        <option value="green">緑系</option>
        <option value="brown">茶系</option>
    </select>
    <select name="size">
        <option value="">大きさを選択</option>
        <option value="small">小さい</option>
        <option value="middle">中くらい</option>
        <option value="large">大きい</option>
    </select>
    <select name="name">
        <option value="">名前を選択</option>
        <option value="dog">イヌ</option>
        <option value="cat">ネコ</option>
        <option value="monkey">サル</option>
        <option value="dolphin">イルカ</option>
        <option value="jellyfish">クラゲ</option>
        <option value="penguin">ペンギン</option>
        <option value="turtle">カメ</option>
        <option value="redstart">ジョウビタキ</option>
        <option value="myna">九官鳥</option>
        <option value="butterfly">蝶</option>
        <option value="crocodile">ワニ</option>
    </select>
</div>
 
<ul class="list">
    <li>
        <img src="01.jpg" width="240" height="155">
        <p class="name">名前:<span class="dolphin">イルカ</span></p>
        <p class="type">種類:<span class="mammals">哺乳類</span></p>
        <p class="live">生活:<span class="water">水中</span></p>
        <p class="color">色:<span class="black">黒系</span></p>
        <p class="size">大きさ:<span class="large">大きい</span></p>
    </li>
    <li>
        <img src="02.jpg" width="240" height="155">
        <p class="name">名前:<span class="jellyfish">クラゲ</span></p>
        <p class="type">種類:<span class="other">その他</span></p>
        <p class="live">生活:<span class="water">水中</span></p>
        <p class="color">色:<span class="white">白系</span></p>
        <p class="size">大きさ:<span class="small">小さい</span></p>
    </li>
    ・
    ・
    ・
    <li>
        <img src="14.jpg" width="240" height="155">
        <p class="name">名前:<span class="dog">イヌ</span></p>
        <p class="type">種類:<span class="mammals">哺乳類</span></p>
        <p class="live">生活:<span class="land">陸上</span></p>
        <p class="color">色:<span class="brown">茶系</span></p>
        <p class="size">大きさ:<span class="middle">中くらい</span></p>
    </li>
</ul>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
    var lists = $('.list li');
    $(document).on('change', '.serchBox select', function() {
        lists.show();
        for (var i = 0; i < $('.serchBox select').length; i++) {
            // 絞り込みの項目を取得
            var item = $('.serchBox select').eq(i).attr('name');
            // 絞り込みの対象を取得
            var target = $('.serchBox select').eq(i).val();
 
            if(target != '') {
                for (var j = 0; j < lists.length; j++) {
                    // 絞り込み対象でない場合は非表示
                    if(!lists.eq(j).find('.' + item).find('span').hasClass(target)) {
                        lists.eq(j).hide();
                    }
                };
            }
        };
    });
});

複数項目での絞り込みのデモページ
今回はHTML内に要素として表示させていますが、data属性を使ったりしてもよいと思います。
　

関連記事

56件のコメント

  1. pome より:
    2022/08/10 01:59

    こちらのサイトいつも利用しています。
    ありがとうございます。

    https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index4.html

    ↑のページで
    表示されている各要素に「current」などのクラスを付与するには
    どうしたらいいかわからず困っています。

    ご教示いただけると幸いです。

    返信
  2. yuppa より:
    2022/08/05 12:00

    初めまして。
    こちらの絞り込み検索の件、
    他に何記事も調べましたが、こちらのサイトがとてもわかりやすいです。
    本当にありがとうございます。

    以下質問です。
    始めから全件表示されている状態で
    検索ボタン・リセットボタンを設置し、
    更にリスト下部にページネーションを
    つけるにはどうすればいいでしょうか？
    ページネーションプラグインを併用したりしましたが
    うまくいきません。。

    お忙しい中大変恐れ入りますが、ご教示いただけますと幸いです。
    よろしくお願いいたします。

    返信
  3. waidi より:
    2022/01/26 17:34

    はじめまして。いつも参考にさせて頂いております。
    質問なのですが、
    何も選択していない状態での表示数の指定と
    選択した状態での表示数の指定を統一し、
    もっと見るで指定数ずつ増やしたいと考えています。

    この時選択を変更すると8つ表示に戻したいです。

    例)・何も選択していない状態での表示数を8つ、選択した状態での表示数を8つ
    ・上記どちらの状態でも、もっと見るで4つずつ表示
    ・選択を変更すると初期表示数の8つに戻したい

    このような表示の方法はありますでしょうか。
    お忙しいところ恐縮ですが、よろしくお願いします。

    返信
  4. Beginner より:
    2021/03/25 18:03

    はじめまして。
    こちらの記事を参考にさせていただいてます。

    サンプルコード2を参考にプルダウンメニューでの絞り込みを実装しているのですが、
    他のページからリンクでジャンプしてきた時に
    プルダウンメニューのいずれかを選択した状態で開かせたいのですが上手くいきません。

    やりたいことは8番さんの質問と同じようなことなのですが、
    初期選択したい項目にselectedを追加しておくのではなく
    URLのアンカーでプルダウンメニューの選択項目を指定したいのですが
    そのようなことはできますでしょうか？
    お忙しいところ恐縮ですが、どうぞよろしくお願いいたします。

    返信
    • cly7796.net より:
      2021/04/06 21:14

      Beginnerさん
      コメントありがとうございます。

      アンカーではなくURLにパラメータを付けて開く形ですが、こちらで問題なさそうでしょうか。
      https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index16.html?name=dog&color=black

      返信
      • Beginner より:
        2021/04/14 11:23

        cly7796.netさま

        サンプル作成ありがとうございます。まさに求めていたとおりのものです！
        ただ、URLにパラメータを付けずに開いたときに絞り込みが出来なくなったのですが
        他のサンプルのjsを続けて追加すると動きました。
        この方法で間違いないでしょうか？
        お忙しいところ申し訳ありませんが、ご教授いただけますと幸いです。。

        返信
        • Beginner より:
          2021/04/14 12:15

          cly7796.netさま
          度々申し訳ございません。
          jquery3系で動かそうとする場合はどこを調整すれば良いのでしょうか？
          質問ばかりで申し訳ないのですがどうぞよろしくお願いいたします。

          返信
          • Beginner より:
            2021/04/16 16:45

            cly7796.netさま
            いろいろ質問させていただきましたが自己解決いたしました。
            もし回答を考えてくださっていたら申し訳ありません。
            こちらのサイトはサンプルも解説もとても分かりやすく、参考・勉強になります。
            ありがとうございました。

          • cly7796.net より:
            2021/04/18 22:56

            Beginnerさん
            解決されたようでよかったです。

            一応、以前のサンプルにパラメータがない場合の対応を追加しました。
            https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index16.html

  5. szsr より:
    2020/11/06 15:12

    初めまして。
    参考にさせていただいてます。
    質問なのですが、選択項目から1つを選択した時にでる項目たちが表示された時の動きを滑らかにしたいのですが、どうすればよろしいでしょうか。
    お忙しい所申し訳ありません、よろしくお願いいたします。

    返信
  6. 松本 より:
    2020/11/06 00:02

    はじめまして、いつも参考にさせていただきます。検索のボタンを押すと、検索結果のページを別のページで表示させるようにしたいのですが、その場合のプログラムが組めなくて困っています。お忙しいところすみませんが、お手をお借りできたら幸いです。

    返信
    • cly7796.net より:
      2020/11/14 00:24

      松本さん
      コメントありがとうございます。
      こちらは同一ページ内で一覧表示を絞り込む記事になりますので、別のページで検索結果を表示するということであれば別の内容になりますね。

      返信
  7. mariko より:
    2020/07/16 00:56

    初めまして。
    とても参考にさせていただいております！
    サンプルコード2と似たような依頼があり助かってのですが、さらに「○○件」と件数表示して欲しいと言われ、困っています。
    表示方法を教えていただけないでしょうか。

    返信
  8. neko より:
    2020/06/18 14:57

    やりたいことに近いこちらのページを参考とさせていただいており、大変助かっております。
    ありがとうございます。
    勉強不足ですみませんが、ご教示いただきたい点があります。
    下記で該当しないチェックボックスが非表示になりますが、表示はさせたままで非活性にする方法はありますでしょうか。
    https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index7.html
    お忙しいところ恐縮ですが、どうぞよろしくお願い致します。

    返信
  9. ノア より:
    2020/03/04 02:23

    はじめまして。このサイトをとても参考にさせていただいております。

    サンプルコード2を参考に、複数のセレクタで絞り込むコードを作っています。
    しかしセレクタを変更すると、リストの項目がすべて非表示になってしまい、セレクタを全てに戻しても表示されません。

    もしかしたら

    分野を選択
    絵画
    音楽
    彫刻
    書道

    と選択肢があった場合

    分野:絵画・音楽

    のように複数の分野を指定しているせいかもしれないと思っています。
    もしそれが原因だとしたら、このような場合にclassに picture または music のいずれかが入力されている場合に表示させるにはどうしたら良いでしょうか？
    ご教授いただけますと幸いです。

    何卒宜しくお願い致します。

    返信
  10. onionion より:
    2020/02/29 11:20

    index9.html
    を参考にチェックボックス、ラジオボタン、テキスト入力で選択後、検索（リセット）で隠れていたテーブルの該当行のみ表示、なければ該当がないと、表示したいのですが何か良いサンプルコードがありましたらご教示の程お願い申し上げます。

    返信
  11. yuuka より:
    2020/02/18 22:34

    はじめまして。このサイトをとても参考にさせていただいております。
    JavaScript初心者です。
    個人アプリの開発で、はいかいいえの選択をするラジオボタンを５つ作り
    ３２通りの選択肢から１つの結果を出そうとしているのですが、イベントの発火がうまく行かず
    止まっています。お力を貸していただきたいです。
    上記のようなリストを絞り込む処理に検索のボタンを押すと一つの結果が表示される
    実装にしたいのですがJavaScriptのコードの書き方が全然わかりません。
    上記のアプリの場合で構いませんのでJavaScriptのコードの参考例を載せていただけないでしょうか。
    お手数ですがよろしくお願いします。

    返信
  12. design.380 より:
    2019/07/31 14:44

    はじめまして。
    こちらの記事を参考にさせていただいております。

    現在、プルダウンメニューでの絞り込みを実装してるのですが、
    ページ読み込み時にプルダウンメニューのいずれかを選択した状態で
    表示させたいのですが、そのようなことは可能でしょうか。

    実装方法をご教授いただけますと幸いです。
    お忙しいとは思いますが、何卒宜しくお願い致します。

    返信
  13. toru より:
    2019/06/12 21:14

    はじめまして。
    こちら参考にさせていただきました。
    おおよそ想定通りにできたのですが、
    以下の2点で躓いています。
    ・選択リストを操作するまでは、一覧を非表示にしたい
    ・該当するリストがない場合は、「非対応です」と表示したい
    何かいい方法がございましたらぜひご教授ください。
    よろしくお願いいたします。

    返信
  14. K より:
    2019/06/12 11:06

    はじめまして。
    こちら参考にさせていただきたいのですが、１点分からないことがあります。
    要素を絞り込んだ際に、たとえば４つずつ表示して残りの分は「もっと見る」でさらに４つずつ表示していくにはどうすればよいのでしょうか？

    全てのタブでは正常に動作するのですが、絞り込みを行うと正常に動作しなくなってしまいます。

    ご教授いただけますと幸いです。
    よろしくお願い致します。

    返信
    • cly7796.net より:
      2019/06/13 01:52

      Kさん
      コメントありがとうございます。
      正常に動作しないのは、絞り込みで非表示にした要素も「もっと見る」の対象になっているためかと思います。
      サンプル作ってみましたが、以下のような動作で問題ないでしょうか。
      https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index8.html
      元のサンプルは絞り込み対象外の要素を非表示にしているだけだったので、絞り込み対象の要素に対してclassを追加して「もっと見る」を実装しています。
      現在テストで2件ずつ表示していますので、件数を変更したい場合はjsファイルの1行目の値を変更してください。

      返信
  15. shiratamaanmitsu より:
    2019/05/24 08:37

    初めまして、色々と検索してたどり着きました。

    https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index5.html
    上記サンプルにて
    種類を選択すると、名前一覧のチェックボックスも選択によって
    表示が消えたりできないかと試行錯誤しているのですがうまくいきません。

    ご教授願えればと思いコメントしてみました。
    よろしくお願いします。

    返信
  16. よっしー より:
    2019/05/10 13:47

    始めまして。
    こちらの記事を参考にさせていただいております。
    何点かわからない点がありますので、ご教授いただけると助かります。
    現在、classではなくデータ属性を
    使って、絞り込みを作成できないか模索しているのですが、
    知識が浅いため、やり方をご教授いただけますと幸いです。

    何卒宜しくお願い致します。

    返信
  17. yoloyolo より:
    2019/01/22 20:44

    はじめまして。
    参考にさせて頂きました。ありがとうございます。
    初心者で、初歩的な質問かもしれませんが、分からないことがある為教えて頂けると幸いです。
    htmlをそのまま張り付けたのですが、絞り込みの画像や情報が縦に並んでしまいます。
    デモページのように横に4つ、またその下に4つというように、きれいに並べるにはどうすればいいですか？
    ソースを見てみたのですが、CSSを読み込んでいるのでしょうか？
    勉強不足ですみません。ご教授よろしくお願いいたします。

    返信
  18. aya より:
    2018/12/31 16:51

    はじめまして。
    探し求めていたスクリプトで大変助かります。
    すみません。こちら↓のサンプルにリセットボタンを付ける方法を教えていただけないでしょうか。
    https://cly7796.net/blog/sample/implement-the-process-of-narrowing-down-the-list/index3.html

    返信
  19. さち より:
    2018/10/24 20:00

    昨日、質問をさせていただきましたが解決しました。
    もし、回答を考えていただいていましたらすみません。

    返信
    • cly7796.net より:
      2018/10/24 23:55

      さちさん
      コメントありがとうございます。
      返信が遅くなってしまい申し訳ありません。
      解決されたようでよかったです。

      返信
  20. さち より:
    2018/10/23 19:21

    はじめまして。
    data属性を使った方法を教えていただきたいです。

    返信
  21. さち より:
    2018/10/23 19:07

    はじめまして。
    参考にさせていただいてます。
    最後に「今回はHTML内に要素として表示させていますが、data属性を使ったりしてもよいと思います。」
    とあります。
    下記のようなリストの書き方にした場合、どのように変更したらよいでしょうか。

    お忙しいところ、申し訳ありませんが、ご教授願います。

    返信
  22. カナぴす より:
    2018/09/10 16:16

    はじめまして。どの記事を見ても初心者にはわかりずらく、こちらのサイトは大変わかりやすく助かっております。何点かわからない点がありますので、ご教授いただけると助かります。

    検索ボタンを付け、ボタンを押すと同じページに検索結果が出てくるようにしたいと考えております。

    お忙しいところ恐縮ですが、よろしくお願いいたしますm(__)m

    返信
  23. kyoko より:
    2018/01/25 00:36

    はじめまして。大変参考になり活用させて頂きたいのですが、1点教えていただけないでしょうか。
    複数項目での絞り込みにチェックボックスも追加したい場合のJS記述はどのようになるでしょうか？

    HTMLは、

    AAAを選択
    AAA-1
    AAA-2
    AAA-3

    BBBを選択
    BBB-1
    BBB-2
    BBB-3

    CCC-1
    CCC-2
    CCC-3

    のような感じです。

    初心者なものでご教授いただけると幸いです。

    返信

Beginner へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930