Free Download Dynamic List Filter & Search In jQuery – Search Filtering

This time I will share jQuery Plugin and tutorial about Dynamic List Filter & Search In jQuery – Search Filtering, hope it will help you in programming stack.

File Size:	4.19 KB
Views Total:	1483
Last Update:	11 months ago
Publish Date:	11 months ago
Official Website:	Go to website
License:	MIT

Demo Download

A super tiny jQuery filtering script that provides collection (category) filter and instant search functionalities for a long dynamic list on the webpage.

How to use it:

1. Define your data (e.g. products, books, contacts) containing titles, ID, and category names in a JS array as follows:

01
const data = [

02
      {

03
        title: "The Legend of Zelda: Majora's Mask <a href="https://www.jqueryscript.net/tags.php?/3D/">3D</a>",

04
        id: 1,

05
        category: "Nintendo 3DS",

06
      },

07
      {

08
        title: "Super Smash Bros.",

09
        id: 2,

10
        category: "Nintendo 3DS",

11
      },

12
      {

13
        title: "Super Smash Bros.",

14
        id: 3,

15
        category: "Nintendo WiiU",

16
      },

17
      {

18
        title: "LEGO Batman 3: Beyond Gotham",

19
        id: 4,

20
        category: "Nintendo WiiU",

21
      },

22
      {

23
        title: "LEGO Batman 3: Beyond Gotham",

24
        id: 5,

25
        category: "Xbox One",

26
      },

27
      {

28
        title: "LEGO Batman 3: Beyond Gotham",

29
        id: 6,

30
        category: "PlayStation 4",

31
      },

32
      {

33
        title: "Far Cry 4",

34
        id: 7,

35
        category: "PlayStation 4",

36
      },

37
      {

38
        title: "Far Cry 4",

39
        id: 8,

40
        category: "Xbox One",

41
      },

42
      {

43
        title: "Call of Duty: Advanced Warfare",

44
        id: 9,

45
        category: "PlayStation 4",

46
      },

47
      {

48
        title: "Call of Duty: Advanced Warfare",

49
        id: 10,

50
        category: "Xbox One",

51
      },

52
];

2. Assign matched ID to the list items.

01
<ul id="games">

02
  <li data-id="1">The Legend of Zelda: Majora's Mask 3D for Nintendo 3DS</li>

03
  <li data-id="2">Super Smash Bros. for Nintendo 3DS</li>

04
  <li data-id="3">Super Smash Bros. for Nintendo WiiU</li>

05
  <li data-id="4">LEGO Batman 3: Beyond Gotham for Nintendo WiiU</li>

06
  <li data-id="5">LEGO Batman 3: Beyond Gotham for Xbox One</li>

07
  <li data-id="6">LEGO Batman 3: Beyond Gotham for PlayStation 4</li>

08
  <li data-id="7">Far Cry 4 for PlayStation 4</li>

09
  <li data-id="8">Far Cry 4 for Xbox One</li>

10
  <li data-id="9">Call of Duty: Advanced Warfare for PlayStation 4</li>

11
  <li data-id="10">Call of Duty: Advanced Warfare for Xbox One</li>

12
</ul>

3. Create a search field to filter through these list items by typing keywords.

1
<form id="search" action="" method="get">

2
  <fieldset>

3
    <input type="search" placeholder="Enter a game name">

4
    <input type="submit" value="Search">

5
  </fieldset>

6
</form>

4. Create checkboxes to filter through these list items by category.

01
<form action="" method="get">

02
  <fieldset>

03
    <ul>

04
      <li>

05
        <label>

06
          <input type="checkbox" value="Nintendo 3DS" checked>

07
          Nintendo 3DS

08
        </label>

09
      </li>

10
      <li>

11
        <label>

12
          <input type="checkbox" value="Nintendo WiiU" checked>

13
          Nintendo WiiU

14
        </label>

15
      </li>

16
      <li>

17
        <label>

1 
Share this:Facebook
Tweet
WhatsApp
Related posts:Free Download Advanced Speech Bubble Tooltip Plugin – jQuery FlstBubble.js
Free Download Smooth Sticky Header In jQuery – sp.stickyHeader.js
Free Download Powerful Calendar Plugin With jQuery – Calendar.js