javascript为列表创建搜索框

Question

我有这个排行榜:

我添加了一个搜索框，用户可以在其中搜索列表中的员工。

我正在使用以下 PHP 来回应排行榜中的列表:

<div class="tab-content">
  <div id="weeklylb" class="leadboardcontent">

    <div class="leaderboard" id="leaderboard">

      <ol id="myOL">
        <li>
          <mark>
            <?php while( $toprow4=s qlsrv_fetch_array( $stmt4) ) {
                      echo "<div class='parent-div'><span class='rank'>" . $toprow4[ 'rank'] .
                           "</span><span class='name'>" . $toprow4[ 'EmployeeName'] .
                           "</span><span class='points'>" . $toprow4[ 'pointsRewarded'] .
                           "</span></div>"; } ?>
          </mark>
        </li>
      </ol>
    </div>

下面是搜索框的代码:

<div id="search5back">

    <form method="get" action="/search" id="searchbox5">
        <input id="search52" name="q" type="text" size="40" onkeyup="myFunction()" placeholder="Search an Employee...." />
    </form>
</div>

我尝试使搜索框工作的 JavaScript:

function myFunction() {
    var input, filter, ol, li, a, i;
    input = document.getElementById("search52");
    filter = input.value.toUpperCase();
    ol = document.getElementById("myOL");
    li = ol.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByClassName("name")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

JavaScript 看起来很完美。

请任何人帮助我纠正错误。

Answer 1

在我看来像你的 <ol>只有一个<li>在里面。您所有的“名称”元素都在那个 <li> 中, 所以你在这里只检查第一个:

    a = li[i].getElementsByClassName("name")[0];

如果您搜索名字可能有用。