隐藏＆amp;显示实时搜索结果

Question

我正在尝试使用实时搜索框过滤定义。它有效，但速度很慢。如何优化我的JS / jQuery以更快地运行？

JSFiddle： https://jsfiddle.net/JFlattery/2c9dpp8p/

HTML：

    <div class="ms-rte-layoutszone-inner">
      <div id="floatNav"><a href="#outerShell">&uarr; Back to Top &uarr;</a></div>
      <div id="outerShell">
        <div class="backButton">
          <div>&laquo;Back</div>
        </div>
        <div id="PageTitle">
          <center>
            <h1>Terminology</h1>
          </center>
        </div>
        <div id="letterMenu">
          <a href="#A" class="letterA">&nbsp;A&nbsp;</a>
          <a href="#B" class="letterB">&nbsp;B&nbsp;</a>
          <a href="#C" class="letterC">&nbsp;C&nbsp;</a>
          <a href="#D" class="letterD">&nbsp;D&nbsp;</a>
          <a href="#E" class="letterE">&nbsp;E&nbsp;</a>
          <a href="#F" class="letterF">&nbsp;F&nbsp;</a>
          <a href="#G" class="letterG">&nbsp;G&nbsp;</a>
          <a href="#H" class="letterH">&nbsp;H&nbsp;</a>
          <a href="#I" class="letterI">&nbsp;I&nbsp;</a>
          <a href="#J" class="letterJ">&nbsp;J&nbsp;</a>
          <a href="#K" class="letterK">&nbsp;K&nbsp;</a>
          <a href="#L" class="letterL">&nbsp;L&nbsp;</a>
          <a href="#M" class="letterM">&nbsp;M&nbsp;</a>
          <a href="#N" class="letterN">&nbsp;N&nbsp;</a>
          <a href="#O" class="letterO">&nbsp;O&nbsp;</a>
          <a href="#P" class="letterP">&nbsp;P&nbsp;</a>
          <a href="#Q" class="letterQ">&nbsp;Q&nbsp;</a>
          <a href="#R" class="letterR">&nbsp;R&nbsp;</a>
          <a href="#S" class="letterS">&nbsp;S&nbsp;</a>
          <a href="#T" class="letterT">&nbsp;T&nbsp;</a>
          <a href="#U" class="letterU">&nbsp;U&nbsp;</a>
          <a href="#V" class="letterV">&nbsp;V&nbsp;</a>
          <a href="#W" class="letterW">&nbsp;W&nbsp;</a>
          <a href="#X" class="letterX">&nbsp;X&nbsp;</a>
          <a href="#Y" class="letterY">&nbsp;Y&nbsp;</a>
          <a href="#Z" class="letterZ">&nbsp;Z&nbsp;</a>
        </div>

        <form id="live-search" action="" class="styled" method="post">
          <fieldset>
            <legend>Search:</legend>
            <input type="text" class="text-input" id="filter" value="" />
          </fieldset>
        </form>
        <div class="table" id="letterTable">
          <h3 id="A" class="letterA">A...</h3>
          <div class="letterSection letterA">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="B" class="letterB">B...</h3>
          <div class="letterSection letterB">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="C" class="letterC">C...</h3>
          <div class="letterSection letterC">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="D" class="letterD">D...</h3>
          <div class="letterSection letterD">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="E" class="letterE">E...</h3>
          <div class="letterSection letterE">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="F" class="letterF">F...</h3>
          <div class="letterSection letterF">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="G" class="letterG">G...</h3>
          <div class="letterSection letterG">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="H" class="letterH">H...</h3>
          <div class="letterSection letterH">
            <ul>
              <li class="wordLine"><span class="term">Hubris</span> - <span class="definition">exaggerated pride or self-confidence</span> <span class="example"></span></li>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="I" class="letterI">I...</h3>
          <div class="letterSection letterI">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="J" class="letterJ">J...</h3>
          <div class="letterSection letterJ">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="K" class="letterK">K...</h3>
          <div class="letterSection letterK">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="L" class="letterL">L...</h3>
          <div class="letterSection letterL">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="M" class="letterM">M...</h3>
          <div class="letterSection letterM">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="N" class="letterN">N...</h3>
          <div class="letterSection letterN">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="O" class="letterO">O...</h3>
          <div class="letterSection letterO">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="P" class="letterP">P...</h3>
          <div class="letterSection letterP">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="Q" class="letterQ">Q...</h3>
          <div class="letterSection letterQ">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="R" class="letterR">R...</h3>
          <div class="letterSection letterR">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="S" class="letterS">S...</h3>
          <div class="letterSection letterS">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="T" class="letterT">T...</h3>
          <div class="letterSection letterT">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="U" class="letterU">U...</h3>
          <div class="letterSection letterU">
            <ul>
              <li class="wordLine"><span class="term">Urbane</span> - <span class="definition"></span>notably polite or polished in manner<span class="example"></span></li>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="V" class="letterV">V...</h3>
          <div class="letterSection letterV">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="W" class="letterW">W...</h3>
          <div class="letterSection letterW">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="X" class="letterX">X...</h3>
          <div class="letterSection letterX">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="Y" class="letterY">Y...</h3>
          <div class="letterSection letterY">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
          <h3 id="Z" class="letterZ">Z...</h3>
          <div class="letterSection letterZ">
            <ul>
              <li class="wordLine"><span class="term"></span> - <span class="definition"></span> <span class="example"></span></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="backButton">
        <div>&laquo;Back</div>
      </div>
    </div>

JS：

$(document).ready(function() {
  function hideEmpties() {
    $(".term:empty").parent().hide();

    $('.letterSection').each(function() {
      $("." + (/letter[A-Z]\b/g).exec($(this).attr("class"))).show();
      if (!($(this).children('ul').children('li').is(':visible'))) {
        $("." + (/letter[A-Z]\b/g).exec($(this).attr("class"))).hide();
      }
    });
  }
  hideEmpties();

  $("#filter").keyup(function() {

    // Retrieve the input field text
    var filter = $(this).val();

    // Loop through the comment list
    $(".wordLine").each(function() {

      // If the list item does not contain the text phrase fade it out
      if ($(this).text().search(new RegExp(filter, "i")) < 0) {
        $(this).fadeOut();
        hideEmpties();

        // Show the list item if the phrase matches
      } else {
        $(this).show();
        hideEmpties();
      }
    });
  });
});

Answer 1

你应该做的2件事

1. 将内存引用保存到列表中以进行迭代，以便false

这将获取当前列表并在加载页面时将其保存为数组对象1次。

1. 使用for循环代替每个循环，因为它更快，你也可以实现树搜索算法。初始加载需要更长的时间，但一旦页面加载，它将是油脂闪电。 {Javascript树算法related post。 但首先您需要将数组创建为树对象。否则你将会做O（n）quick reference