javascript - 简单的 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();
        } 
    });
});

我认为问题在于搜索是基于字符而不是单词进行的。例如，如果我搜索术语“cardio”，会弹出几个没有该词或“cardiovascular”一词的结果。我注意到这是确实显示的结果，字母 c ard i o 全部存在并按该顺序存在。这方面的一个例子是在包含文本的 div 中:

理查德瑞克 位置

这些行包含字母 c 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>