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.
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:
03 |
title: "The Legend of Zelda: Majora's Mask <a href=" https: |
05 |
category: "Nintendo 3DS" , |
08 |
title: "Super Smash Bros." , |
10 |
category: "Nintendo 3DS" , |
13 |
title: "Super Smash Bros." , |
15 |
category: "Nintendo WiiU" , |
18 |
title: "LEGO Batman 3: Beyond Gotham" , |
20 |
category: "Nintendo WiiU" , |
23 |
title: "LEGO Batman 3: Beyond Gotham" , |
28 |
title: "LEGO Batman 3: Beyond Gotham" , |
30 |
category: "PlayStation 4" , |
35 |
category: "PlayStation 4" , |
43 |
title: "Call of Duty: Advanced Warfare" , |
45 |
category: "PlayStation 4" , |
48 |
title: "Call of Duty: Advanced Warfare" , |
2. Assign matched ID to the list items.
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 > |
3. Create a search field to filter through these list items by typing keywords.
1 |
< form id = "search" action = "" method = "get" > |
3 |
< input type = "search" placeholder = "Enter a game name" > |
4 |
< input type = "submit" value = "Search" > |
4. Create checkboxes to filter through these list items by category.
01 |
< form action = "" method = "get" > |
06 |
< input type = "checkbox" value = "Nintendo 3DS" checked> |
12 |
< input type = "checkbox" value = "Nintendo WiiU" checked> |