1$(document).ready(function() {
2 var images = $(".item") //contain all unfiltered images
3 $("#filter").on("change paste keyup", function(){
4 $.each(images, function(i, l){
5 $(l).hide();
6 }); //hide all images
7 searchValue = $("#filter").val(); //get entered value of input field
8 searchValueRE = new RegExp(searchValue, "i"); //convert search value into RegExp
9 output = $.grep(images, function (n) {return searchValueRE.test(n.className); }); //Returns array that matches input value
10 $.each(output, function(i, l){
11 $(l).show();
12 }); //show matched images
13 });
14});
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
2<form id="live-search" method="post">
3 <fieldset>
4 <input type="text" class="text-input" id="filter" />
5 <span id="filter-count"></span>
6 </fieldset>
7</form>
8
9<br/>
10<br/>
11
12<div id="gallery">
13 <div class="item #1 Category-Home Home">
14 <a id="#image-link" target="_blank" a href="">
15 <img class="img_item"><img src="http://placehold.it/150x151" />
16
17 </a>
18 </div>
19 <div class="item #2 Category-Kitchen Kitchen">
20 <a id="#image-link" target="_blank" a href="">
21 <img class="img_item"><img src="http://placehold.it/150x152" />
22
23 </a>
24 </div>
25 <div class="item #3 Category-Outdoors Outdoors">
26 <a id="#image-link" target="_blank" a href="">
27 <img class="img_item"><img src="http://placehold.it/150x153" />
28
29 </a>
30 </div>
31 <div class="item #4 Category-Sports Sports">
32 <a id="#image-link" target="_blank" a href="">
33 <img class="img_item"><img src="http://placehold.it/150x154" />
34
35 </a>
36 </div>
37</div>