CODEWITHSUNDEEP
jqueryhtml
Jibatsu
Jibatsu

Reputation: 57

Using JQuery to hide divs using a search box

My jQuery knowledge is limited and I have tried searching round the forum for an answer to my question but I can't quite get any suggest solutions to work and my inexperience is stopping me from seeing where my problems are occurring.

I have a page with some tiled cards, each containing more divs and other text elements. I would like to be able to search in a search box for any strings of text that could be anywhere in one of these cards and hide the rest of the cards which do not.

So far I have managed to get it working so that my search query is case insensitive and when it finds a match it will hide everything else within that card.

I feel like i'm close but I don't think I can quite make it there on my own.

      $(document).ready(function(){
        $("#myInput").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          $("#myDIV *").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          });
        });
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="Search..">
<div class="boxes" id="myDIV">
  <div class="card HCAM" data-type="HCAM">
    <div class="card-image"></div>
    <div class="card-text">
      <span class="date">4 days ago</span>
      <h2>Post One</h2>
      <p>Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae
        temporibus omnis illum maxime quod deserunt eligendi dolor</p>
    </div>
    <div class="card-stats">
      <div class="stat">
        <div class="value">4<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">5123</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">32</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1700" data-type="L1700">
    <div class="card-image card2"></div>
    <div class="card-text card2">
      <span class="date">1 week ago</span>
      <h2>Post Two</h2>
      <p>Adipisicing elit. Ducimus, repudiandae corrupti amet temporibus omnis provident illum maxime quod. Lorem ipsum dolor</p>
    </div>
    <div class="card-stats card2">
      <div class="stat">
        <div class="value">7<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">7152</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">21</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1500" data-type="L1500">
      <div class="card-image card3"></div>
      <div class="card-text card3">
        <span class="date">3 week ago</span>
        <h2>Post Three</h2>
        <p>Repudiandae corrupti amet temporibus omnis provident illum maxime. Ducimus, lorem ipsum dolor adipisicing elit</p>
      </div>
      <div class="card-stats card3">
        <div class="stat">
          <div class="value">5<sup>m</sup></div>
          <div class="type">read</div>
        </div>
        <div class="stat border">
          <div class="value">3021</div>
          <div class="type">views</div>
        </div>
        <div class="stat">
          <div class="value">15</div>
          <div class="type">comments</div>
        </div>
      </div>
    </div>
</div>

Upvotes: 2

Views: 858

Answers (1)

user1403588
user1403588

Reputation: 804

You should give unique class to each card, so your selector will be more accurate (you can then easily select them like $(".card")). For this example I just selected all children of your div with id myDIV, iterate over them and hide/show them if they contain text from input search. Also a note that filter is used for filtering selected items, to run a function on each of the item it is preferred to use jQuery's command each.

Here is only slightly modified your code.

$(document).ready(function(){
        $("#myInput").on("keyup", function() {
          var value = $(this).val().toLowerCase();
          
          $("#myDIV").children().each(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
          })
        });
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<input id="myInput" type="text" placeholder="Search..">
<div class="boxes" id="myDIV">
  <div class="card HCAM" data-type="HCAM">
    <div class="card-image"></div>
    <div class="card-text">
      <span class="date">4 days ago</span>
      <h2>Post One</h2>
      <p>Lorem ipsum dolor sit amet consectetur, Ducimus, repudiandae
        temporibus omnis illum maxime quod deserunt eligendi dolor</p>
    </div>
    <div class="card-stats">
      <div class="stat">
        <div class="value">4<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">5123</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">32</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1700" data-type="L1700">
    <div class="card-image card2"></div>
    <div class="card-text card2">
      <span class="date">1 week ago</span>
      <h2>Post Two</h2>
      <p>Adipisicing elit. Ducimus, repudiandae corrupti amet temporibus omnis provident illum maxime quod. Lorem ipsum dolor</p>
    </div>
    <div class="card-stats card2">
      <div class="stat">
        <div class="value">7<sup>m</sup></div>
        <div class="type">read</div>
      </div>
      <div class="stat border">
        <div class="value">7152</div>
        <div class="type">views</div>
      </div>
      <div class="stat">
        <div class="value">21</div>
        <div class="type">comments</div>
      </div>
    </div>
  </div>
  <div class="card L1500" data-type="L1500">
      <div class="card-image card3"></div>
      <div class="card-text card3">
        <span class="date">3 week ago</span>
        <h2>Post Three</h2>
        <p>Repudiandae corrupti amet temporibus omnis provident illum maxime. Ducimus, lorem ipsum dolor adipisicing elit</p>
      </div>
      <div class="card-stats card3">
        <div class="stat">
          <div class="value">5<sup>m</sup></div>
          <div class="type">read</div>
        </div>
        <div class="stat border">
          <div class="value">3021</div>
          <div class="type">views</div>
        </div>
        <div class="stat">
          <div class="value">15</div>
          <div class="type">comments</div>
        </div>
      </div>
    </div>
</div>

Upvotes: 5

Related Questions