troubleshooting Question

list:contains ... search finds as it should but how could I get the number items found?

Avatar of Mark Branscum
Mark BranscumFlag for United States of America asked on
JavaScriptjQuery
3 Comments1 Solution120 ViewsLast Modified:
Here is my codepen   http://codepen.io/jsMarko/pen/qrGevG

What I am wondering is if I could have the number of items/names found?

$(document).ready(function() {
  $("#btn").click(function() {
    var sName = $("#nameSearch").val();
    $("li").removeClass('result');
    $("li:contains('" + sName + "')").addClass('result');

  });
  $("input[type='text']").click(function() {
    $(this).select();
  });
  var count = $("ol").children().length;
  $("#lab").text("# " + count);
});

.result {
  text-decoration: underline;
  Font-weight: bold;
  font-size: 20px;
}

#nameSearch {
  margin-left: 25px;
  margin-top: 10px;
  width: 194px;
}

#lab {
  float: right;
  padding: 5px 15px;
  font-weight: bold;
  color: #fff
}
#btn {
  margin-left: 5px;
}

.listHeader {
  position: absolute;
  background-color: #85a0ad;
  width: 180px;
  height: 30px;
}

ol {
  padding-top: 25px;
}

#bord {
  overflow: hidden;
  overFlow: auto;
  height: 140px;
  border: 1px solid gray;
  width: 185px;
  text-aligh: center;
  margin-left: 25px;
  padding-right: 10px;
  box-shadow: 5px 5px 2px #666;
  background-color: #c9e3ef;
}
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>contains demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>

<body>
  <div id="bord">
    <div class="listHeader">
    <label Id="lab">#</label>
    </div>
    
    <ol>
      <li>Bill Jones</li>
      <li>Cindy Nelson</li>
      <li>Katherine Gates</li>
      <li>David Johnson</li>
      <li>Steve Jobs</li>
      <li>Ricky Nelson</li>
      <li>David Jones</li>
      <li>Mary Smith</li>
      <li>Tim Conway</li>
      <li>Jerry Lewis</li>
      <li>Bobby McGee</li>
      <li>Danny Smith</li>
    </ol>
  </div>
  <input id="nameSearch" type="text" placeholder="Search Name" />
  <button id="btn">Search</button>


</body>

</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 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 3 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