How to make search button to filter gallery images by
name

Question

I have an image gallery with title to every image and a input field with search button . when i click the search button i want the images that contain specific character to be displayed and the rest to be hidden and when the input field is empty all the images to be displayed again .

Like if i type "c" all the images with title "TitleCat" to be left and rest hidden. If i type "title" all the images should be still displayed.

<button id="search" onclick="sortImage()" type="button">
    <input type="text" id="inputValue" placeholder="Type to search"> 
    </input>SEARCH
</button>

<div id="Images">
 <div id="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div id="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
</div>

I will need to create a function sortImage() , but i am not sure how to approach it.

score 1 · Answer 1 · answered Nov 03 '19 at 08:13

On Input change, launch a function that look at each p, and apply a class "hide" on each parent of p that not contains your search value, something like that

function searchGallery(data) {
    $("#Images p").each(function() {
        $(this).parent.toggleClass('hide',!$(this).html().contains(data));
    });
}

Decide to make your search CI or not.

score 1 · Answer 2 · answered Nov 03 '19 at 08:17

First you have to change id="img" to class="img" because ID should be unique. I use contain to filter the result but If you want to act case insensitive you should shift to indexOf using this Q/A.

function sortImage(){
   var myfilter=$("#inputValue").val();
   $(".img p:not(:contains("+ myfilter +"))").hide();
$(".img p:contains("+ myfilter +")").show();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="search" onclick="sortImage()" type="button">
    <input type="text" id="inputValue" placeholder="Type to search"> 
    </input>SEARCH
</button>

<div id="Images">
 <div class="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
 <div class="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
</div>

score 1 · Answer 3 · answered Nov 03 '19 at 08:25

Using pure js

function sortImage() {
  var p_tags = document.getElementsByTagName("p"); //Get All p Elements
  var searchText = document.getElementById('inputValue').value; //Get written in input
  if (searchText != "") {
    for (var i = 0; i < p_tags.length; i++) { //Loop to check every p content with input value
       if (p_tags[i].textContent != searchText) { //if p content not equal input value
          p_tags[i].parentElement.style.display = "none"; //Hide Parent
         }
      }
  }

}

and Just simple edit in html code

<input type="text" id="inputValue" placeholder="Type to search">
<button id="search" onclick="sortImage()" type="button">
   SEARCH
</button>

heithem moumni · Answer 4 · 2019-11-03T08:35:12.347

a small example how to do a filter search using data-attribute, you can make a full text in your p tags and filter still work.

Html part :

<input type="text" id="inputValue" placeholder="Type to search"></input>
<button id="search" class="filter-button" type="button">
    SEARCH
</button>

<div id="galory">
    <div id="img" data-filter="TitleCat">
        <img src"....">
        <p>TitleCat</p>
    </div>
    <div id="img" data-filter="TitleDog">
        <img src"....">
        <p>TitleDog</p>
    </div>
    <div id="img" data-filter="TitleCat">
        <img src"....">
        <p>TitleCat</p>
    </div>
    <div id="img" data-filter="TitleDog">
        <img src"....">
        <p>TitleDog</p>
    </div>
</div>

Jquery part:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>

<script>
    $(document).ready(function () {
        $(".filter-button").click(function () {
            var value = $('#inputValue').val();
            $('#galory')
                .children()
                .filter(function () {
                    return $(this).data('filter') != value;
                })
                .hide();
        });
    });
</script>

Mamun · Answer 5 · 2019-11-03T08:58:25.323

First of all the attribute id must be unique in a document, you can use class instead.

You can try with :not() and :contains() like the following way:

function sortImage(){
  $('.img').show(); // show all
  var v = $('#inputValue').val().trim().toUpperCase();
  $('.img > p:not(:contains('+ v +'))').closest('.img').hide(); // hide those does not contain the value
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="search" onclick="sortImage()" type="button">
    <input type="text" id="inputValue" placeholder="Type to search"/>SEARCH
</button>

<div id="Images">
 <div class="img">
  <img src="....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src="....">
  <p>TitleDog</p>
 </div>
 <div class="img">
  <img src="....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src="....">
  <p>TitleDog</p>
 </div>
</div>

Even better without the search button using input event:

$('#inputValue').on('input',function(){
  $('.img').show(); // show all
  var v = $('#inputValue').val().trim().toUpperCase();
  $('.img > p:not(:contains('+ v +'))').closest('.img').hide(); // hide those does not contain the value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" id="inputValue" placeholder="Type to search"/>

<div id="Images">
 <div class="img">
  <img src="....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src="....">
  <p>TitleDog</p>
 </div>
 <div class="img">
  <img src="....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src="....">
  <p>TitleDog</p>
 </div>
</div>

score 1 · Answer 6 · answered Nov 03 '19 at 09:14

Case insensitive search

$(document).on('click', '#search', function(e){
    var myfilter=$("#inputValue").val().toLowerCase();
    $(".img p").hide();

    // for case insensitive    
    $('.img p').each(function(i){
        if($(this).text().toLowerCase().indexOf(myfilter) != -1) {
            $(this).show();
        }       
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="search" type="button">
    <input type="text" id="inputValue" placeholder="Type to search"> 
    </input>SEARCH
</button>

<div id="Images">
 <div class="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
 <div class="img">
  <img src"....">
  <p>TitleCat</p>
 </div>
 <div class="img">
  <img src"....">
  <p>TitleDog</p>
 </div>
</div>

Glad you got it working :) I just removed the `onclick` event as I thought it would be much more flexible with jQuery — mrid, Nov 03 '19 at 10:56

How to make search button to filter gallery images by name

6 Answers6

How to make search button to filter gallery images by
name