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
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>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src=""></script>
  $("#searchname").on("keyup", function() {
   var mycount = 0;
    var value = $(this).val().toLowerCase();
    $("#wrapper .empcard").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
   if (!$(this).val()){
      for (let element of document.getElementsByClassName("empcard")){"none";
  //hide all cards on load
        for (let element of document.getElementsByClassName("empcard")){"none";
   .empcard {
   border: 1px solid red;

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

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

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