research Question

JQuery - I have a filtered list.. but only want to show first 3 matches

Avatar of Romolo
RomoloFlag for United Kingdom of Great Britain and Northern Ireland asked on
JavaScriptHTMLjQuery
11 Comments1 Solution19 ViewsLast Modified:
Hi Everyone,

I have a list that filters on a text field.
But I am struggling to work out how to hide anything over 3 (My real requirement includes over a 100 - my test has 5 :) ).

I am just unsure how to evalute if found and count of 3 or more... instead I just keep unhiding my filtered DIVs. Probably bc I do not understand the filtering properly.

Please help

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <script>
  $(function(){
   
   
    $(document).ready(function(){
  $("#searchname").on("keyup", function() {
   var mycount = 0;
    var value = $(this).val().toLowerCase();
    $("#wrapper .empcard").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
     //console.log("Count:"+mycount);     
    });   
   console.log("Typed");
   
   if (!$(this).val()){
      console.log("EMPTY");
      for (let element of document.getElementsByClassName("empcard")){
         element.style.display="none";
      }
   }
   else
   {
         console.log("STUFF");   
   }
   
  });
  
  //hide all cards on load
        for (let element of document.getElementsByClassName("empcard")){
         element.style.display="none";
      }
  
});
   
   
   
  });
  </script>
  <style>
   .empcard {
   border: 1px solid red;
   width:100px;
   }
  </style>
</head>
<body>


 
  <input type="text" id="searchname" value="">
<div id="parentwrapper">
<div id="wrapper">
   <div id="1" class="empcard"><div id="name">Francis Smith</div>
            <div id="dob">15/09/1963</div>
            <div id="dept">HR</div>
            <div id="appttime" class="apptstart">Appt Start: 10:00</div></div>
   <div id="2" class="empcard"><div id="name">Frank Doogle<div>
            <div id="dob">15/11/1963</div>
            <div id="dept">SALES</div>
            <div id="appttime" class="apptstart">Appt Start: 11:00</div></div>
   <div id="3" class="empcard"><div id="name">Alan Smith</div>
            <div id="dob">19/01/1970</div>
            <div id="dept">HR</div>
            <div id="appttime" class="apptstart">Appt Start: 12:00</div></div>
   <div id="4" class="empcard"><div id="nam4">Diane Smith</div>
            <div id="dob">29/09/1981</div>
            <div id="dept">IT</div>
            <div id="appttime" class="apptstart">Appt Start: 13:00</div></div>
   <div id="5" class="empcard"><div id="name5">Francis Cotton</div>
            <div id="dob">10/09/1992</div>
            <div id="dept">Admin</div>
            <div id="appttime" class="apptstart">Appt Start: 14:00</div></div>
</div>
</div>

</body>
</html>
So I need that to perform as described. But limit the display of EMPCARDS by X... X being 3 in my request.

So only the first 3 cards are found.

Many thanks in advance

R
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 11 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros