Простой поиск содержимого страницы jQuery показать неточные результаты

Question

У меня есть список разделов, которые я хотел бы искать в содержимом. Если есть div, который включает в себя поисковый запрос, я хотел бы показать, что div и скрыть все остальные.

Мой сценарий работает только отчасти. Он показывает результаты, но иногда результаты неточны. Вот мой 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> 

Вот мой 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(); 
     } 
    }); 
}); 

Я считаю, что проблема заключается в том, что поиск происходит на основе символов вместо слова основе. Например, если я ищу термин «кардио», появляется несколько результатов, которые не имеют этого слова или слова «сердечно-сосудистые». Я заметил, что это результаты, которые показывают, буквы c a r d i o присутствуют и присутствуют в этом порядке. Примером этого является в DIV, который содержит текст:

Ричард Рик Позиция

Эти строки содержат буквы С а г д я о.

Answer 1

Я немного исправил ваш код, вы ссылались на некоторые неправильные переменные, пропустили else и пропустили еще toLowerCase, так как вы скрывали все содержимое на каждой итерации по каждому контенту.

Я также изменил сравнение строк с вызовом indexOf(var substr), чтобы быть намного быстрее и менее проблематичным.

$('.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>