showing results for - "input search picture jquery"
Amy
27 Jul 2019
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});
Nicole
08 Aug 2017
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>