We help IT Professionals succeed at work.

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

Mark Branscum
on
110 Views
Last Modified: 2017-04-08
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);
});

Open in new window


.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;
}

Open in new window

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

Open in new window

Comment
Watch Question

Sr. System Analyst
CERTIFIED EXPERT
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Mark BranscumWeb Developer

Author

Commented:
Below is the code you posted in other question ...... did not mean to post that at work to my old visual basic account ..... I am going to select your answer here as it is exactly what I was hoping for ... and so simple too ..... thank you its spot on

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

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

  });

Open in new window

Mark BranscumWeb Developer

Author

Commented:
Spot on and much thanx .... simple to understand as well
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.