This time I will share jQuery Plugin and tutorial about Easy jQuery Client-side List Filtering Plugin – list-search, hope it will help you in programming stack.
| File Size: | 8.92 KB |
|---|---|
| Views Total: | 2286 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
list-search is a small and easy-to-use jQuery plugin that adds a live search filter to any long html lists or block elements.
How to use it:
1. Load the minified version of jQuery list-search plugin after jQuery library like this:
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="js/list-search-min.js"></script> |
2. Insert the data you want to filter through into an html list following the html structure like this.
01 |
<ul class="collection"> |
02 |
<li class="collection-item"> |
03 |
<a href="http://500px.com"> |
04 |
500px |
05 |
</a> |
06 |
</li> |
07 |
<li class="collection-item"> |
08 |
<a href="http://deviantart.com"> |
09 |
DeviantArt |
10 |
</a> |
11 |
</li> |
12 |
<li class="collection-item"> |
13 |
<a href="http://soundcloud.com"> |
14 |
SoundCloud |
15 |
</a> |
16 |
</li> |
17 |
<li class="collection-item"> |
18 |
<a href="http://store.steampowered.com"> |
19 |
Steam |
20 |
</a> |
21 |
</li> |
22 |
<li class="collection-item"> |
23 |
<a href="http://unsplash.com"> |
24 |
Unsplash! |
25 |
</a> |
26 |
</li> |
27 |
<li class="collection-item"> |
28 |
<a href="http://materializecss.com"> |
29 |
Materialize |
30 |
</a> |
31 |
</li> |
32 |
<li class="collection-item"> |
33 |
<a href="https://coolors.co/"> |
34 |
Coolers |
35 |
</a> |
36 |
</li> |
37 |
<li class="collection-item"> |
38 |
<a href="https://www.google.com/fonts"> |
39 |
Google Fonts |
40 |
</a> |
41 |
</li> |
42 |
<li class="collection-item"> |
43 |
<a href="https://nofilmschool.com"> |
44 |
No Film School |
45 |
</a> |
46 |
</li> |
47 |
<li class="collection-item"> |
48 |
<a href="http://<a href="https://www.jqueryscript.net/tags.php?/video/">video</a>copilot.net"> |
49 |
Video Copilot |
50 |
</a> |
51 |
</li> |
52 |
<li class="collection-item"> |
53 |
<a href="http://fractalsponge.net"> |
54 |
Fractalsponge <a href="https://www.jqueryscript.net/tags.php?/3D/">3D</a> Art |
55 |
</a> |
56 |
</li> |
57 |
<li class="collection-item"> |
58 |
<a href="http://wikipedia.org"> |
59 |
Wikipedia |
60 |
</a> |
61 |
</li> |
62 |
<li class="collection-item"> |
63 |
<a href="http://starwars.wikia.com/"> |
64 |
Wookiepedia |
65 |
</a> |
66 |
</li> |
67 |
<li class="collection-item"> |
68 |
<a href="http://jedipedia.wikia.com/"> |
69 |
Jedipedia |
70 |
</a> |
71 |
</li> |
72 |
<li class="collection-item"> |
73 |
<a href="http://oliverschwendener.ch"> |
74 |
Oliver Schwendener (Website) |
75 |
</a> |
76 |
</li> |
77 |
<li class="collection-item"> |
78 |
<a href="http://github.com/oliverschwendener"> |
79 |
Oliver Schwendener (GitHub) |
