javascript - 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

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>