Simple jQuery page content search show inaccurate results

Question

I have list of divs that I would like to search the contents of. If there is a div that includes the search term, I would like to show that div and hide all others.

My script is only kind of working. It shows results but sometimes the results aren't accurate. Here is my html:

<form>
    <input class="searchbox" type="text">
</form>
<div id="staff-directory-wrapper">
    <div class="single-staff" style="display: block;">
            <img src="">
        <div class="name">
            Mark
        </div>
        <div class="position">
            position
            <br>
            Cardiology
        </div>
    </div>
    <div class="single-staff" style="display: block;">
            <img src="">
        <div class="name">
            sam Bob
        </div>
        <div class="position">
            position
            <br>
            Cardiovascular Surgery
        </div>
    </div>
    <div class="single-staff" style="display: block;">
            <img src="">
        <div class="name">
            David charles
        </div>
        <div class="position">
            position
            <br>

        </div>
    </div>
    <div class="single-staff" style="display: block;">
            <img src="">
        <div class="name">
            Richard rick
        </div>
        <div class="position">
            position
            <br>

        </div>
    </div>
    <div class="single-staff" style="display: block;">
            <img src="">
        <div class="name">
            Michael
        </div>
        <div class="position">
            position
            <br>
            Anesthesiology
        </div>
    </div>
</div>

Here is my jQuery:

$('.searchbox').keyup(function() {
    var searchTerm = $('.searchbox').val().toLowerCase();
    var content = $('#staff-directory-wrapper .single-staff');

    content.each(function() {
        $(this).text();
        if ( $(this).is(":contains('"+ searchTerm + "')") ) {
            $(content).hide();
            $(this).fadeIn(400);
        }
        if ($('.searchbox').val() == '') {
            $(content).show();
        } 
    });
});

I believe the problem is that the search is happening on a character basis instead of a word basis. For example, if I search for the term "cardio", several results pop up that don't have that word or the word "cardiovascular". I noticed that is the results that do show, the letters c a r d i o are all present and present in that order. An example of this is in the div that contains the text:

Richard Rick Position

Those lines contain the letters c a r d i o.

Answer 1

I've fixed a little your code, you were referencing some wrong variables, missed an else and missed another toLowerCase, as you were hiding all contents on every iteration over each content.

I also changed the string comparison to an indexOf(var substr) call to be much faster and less problematic.

$('.searchbox').keyup(function() {
  var searchTerm = $('.searchbox').val().toLowerCase();
  var contents = $('#staff-directory-wrapper .single-staff');
  contents.each(function() {
    var text = $(this).text().toLowerCase();
    if (text.indexOf(searchTerm) !== -1) {
      $(this).fadeIn(400);
    } else
      $(this).hide();

    if ($('.searchbox').val() == '') {
      $(this).show();
    }
  });
});

.single-staff {
  margin-bottom: 5px;
  padding: 3px;
  border-bottom: 1px dashed #ccc
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input class="searchbox" type="text">
</form>
<div id="staff-directory-wrapper">
  <div class="single-staff" style="display: block;">
    <img src="" />
    <div class="name">
      Mark
    </div>
    <div class="position">
      position
      <br>Cardiology
    </div>
  </div>
  <div class="single-staff" style="display: block;">
    <img src="" />
    <div class="name">
      sam Bob
    </div>
    <div class="position">
      position
      <br>Cardiovascular Surgery
    </div>
  </div>
  <div class="single-staff" style="display: block;">
    <img src="" />
    <div class="name">
      David charles
    </div>
    <div class="position">
      position
      <br>

    </div>
  </div>
  <div class="single-staff" style="display: block;">
    <img src="">
    <div class="name">
      Richard rick
    </div>
    <div class="position">
      position
      <br>

    </div>
  </div>
  <div class="single-staff" style="display: block;">
    <img src="" />
    <div class="name">
      Michael
    </div>
    <div class="position">
      position
      <br>Anesthesiology
    </div>
  </div>
</div>