Jquery search and display images based on class

Question

I'd like to be able to search and display these based on the class attributes, such as "kitchen". I can't find anything on searching by the class, only text and such. Or if anyone has a recommendation on a better way to search and display images. Any help would be greatly appreciated.

<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div id="item" class="#1 Category-Home Home">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
  <div id="item" class="#2 Category-Kitchen Kitchen">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
  <div id="item">
    <div class="#3 Category-Outdoors Outdoors">
      <a id="#image-link" target="_blank" a href="">
        <img class="img_item"><img src="http://placehold.it/150x150" />

      </a>
    </div>

  </div>
  <div id="item" class="#4 Category-Sports Sports">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
</div>

$(document).ready(function() {
  $("#filter").keyup(function() {


  });
});

https://jsfiddle.net/sgrg4b06/

Answer 1

1) You have ids repeated, ids are unique, I have changed them to class

2) You have: <img class="img_item"><img src="http://placehold.it/150x150" /> The first img tag doesn't contain and image, either change it to a div (dont forget to close it) or just remove it. (In below example i changed to div)

3) Rather than using a class it makes more sense to use the data attribute. I have added a data attribute to each .item.

4) Using jQuery, we can loop through each item and check if the data-category contains the value of the search field. If it doesn't we hide it.

5) If the search box is empty, we show everything.

Hope this helps.

$("#filter").keyup(function() {
  filterString = $("#filter").val().toLowerCase();
  if (filterString.length < 1) {
    //alert("showing all");
    $(".item").slideDown('slow');
  } else {
    $(".item").each(function() {
      if ($(this).data("category").toLowerCase().indexOf(filterString) == -1) {
        $(this).slideUp('slow');
      } else {
        $(this).slideDown('slow');
      }
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div class="item" data-category="Home">
    <a class="#image-link" target="_blank" a href="">
      <div class="img_item"><img src="http://placehold.it/150x150" /></div>
    </a>
  </div>
  <div class="item" data-category="Kitchen">
    <a class="#image-link" target="_blank" a href="">
      <div class="img_item"><img src="http://placehold.it/150x150" /></div>

    </a>
  </div>
  <div class="item" data-category="Outdoors">
    <a class="#image-link" target="_blank" a href="">
      <div class="img_item"><img src="http://placehold.it/150x150" /></div>
    </a>
  </div>

  <div class="item" data-category="Sports">
    <a class="#image-link" target="_blank" a href="">
      <div class="img_item"><img src="http://placehold.it/150x150" /></div>
    </a>
  </div>
</div>

Answer 2

So first, thing, remove all the duplicate ID's all over the place. That will only cause headaches. ID's are unique identifiers. Second, see the below. Pretty well commented. It IS case sensitive.

// then, on entering text...
  $("#filter").on("keyup", function() {
  if ($(this).val().length > 0) {
    // hide everything,
    $(".item").hide();
    // get the text in the input
    var mySelector = $(this).val();
    // show any class that contains the input
    var myImgs = $("[class*='"+mySelector+"' i]");
    myImgs.show();
  } else {
    $(".item").show();
  }

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div id="image-1" class="item #1 Category-Home Home">
    <a target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
  <div id="image-2" class="item #2 Category-Kitchen Kitchen">
    <a target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>
  <div id="image-3" class="item #3 Category-Outdoors Outdoors">
      <a target="_blank" a href="">
        <img class="img_item"><img src="http://placehold.it/150x150" />

      </a>
    </div>

  </div>
  <div id="image-4" class="item #4 Category-Sports Sports">
    <a target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x150" />

    </a>
  </div>

Your comment about case insensitivity made me curious. If you google jquery attribute selector case insensitivity, there is a lot of cool stuff to be found. The most simple solution was to change the selector, as above -- note that there is now a

$("[class*='"+mySelector+"' i]")

The i on the tail of the selector indicates case insensitivity.

FURTHER CHANGES -- now, when the input has no value, all image divs are shown. And, by default, they're all visible.

Answer 3

I removed all id, but added classes into divs attr. Below is working solution (case insensitive). Also I changed Your images a little bit, for You can see difference.

$(document).ready(function() {
  var images = $(".item") //contain all unfiltered images
  $("#filter").on("change paste keyup", function(){
  	$.each(images, function(i, l){
  		$(l).hide();
  	}); //hide all images
  	searchValue = $("#filter").val(); //get entered value of input field
    searchValueRE = new RegExp(searchValue, "i"); //convert search value into RegExp
    output = $.grep(images, function (n) {return searchValueRE.test(n.className); }); //Returns array that matches input value
    $.each(output, function(i, l){
  		$(l).show();
  	}); //show matched images
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="live-search" method="post">
  <fieldset>
    <input type="text" class="text-input" id="filter" />
    <span id="filter-count"></span>
  </fieldset>
</form>

<br/>
<br/>

<div id="gallery">
  <div class="item #1 Category-Home Home">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x151" />

    </a>
  </div>
  <div class="item #2 Category-Kitchen Kitchen">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x152" />

    </a>
  </div>
    <div class="item #3 Category-Outdoors Outdoors">
      <a id="#image-link" target="_blank" a href="">
        <img class="img_item"><img src="http://placehold.it/150x153" />

      </a>
    </div>
  <div class="item #4 Category-Sports Sports">
    <a id="#image-link" target="_blank" a href="">
      <img class="img_item"><img src="http://placehold.it/150x154" />

    </a>
  </div>
</div>