簡單的jQuery頁面內容搜索顯示不準確的結果

Question

我有我想搜索內容的div列表。如果有包含搜索字詞的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：

理查德·裏克 位置

這些行包含ÇA R d I O字母。

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>