如何在列表中搜索項目？

Question

這是一個用於搜索域的小提琴（僅供參考）： https : //jsfiddle.net/pvwvdgLn/1/

關鍵是-搜索框用於在排行榜的名稱列表中搜索一名員工（實際上排行榜包含800名員工，這是從數據庫中回顯的）

問題：當我切換到整個LB並搜索員工時，搜索框不起作用。

我懷疑這個問題：兩個列表都與onkeyup =“ myFunction（）”調用相同的ol id =“ myOL”。當我切換列表時，它應該從為整個LB列表設置的另一個ID中獲取數據。

我嘗試了以上我懷疑的事情，但是與JS搞混了。

搜索框適用於“每周Lb”。

搜索框的html代碼：

 <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> 

排行榜中兩個列表的代碼：-每周Leaderbaord

  <div id="weeklylb" class="leadboardcontent"> <div class="leaderboard" id="leaderboard"> <ol id = "myOL"> <li> <mark> <?php while( $toprow4 = sqlsrv_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> 

排行榜中兩個列表的代碼：-整體Leaderbaord

  <div class="leaderboard" id="leaderboard"> <ol id = "myOL"> <li> <mark> <?php while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) { echo "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>"; } ?> </mark> </li> </ol> </div> 

與兩個標簽（每周LB和總體LB）相關的javascript：

 $(document).ready(function() { $('.tab a').on('click', function(e) { e.preventDefault(); var _this = $(this); var block = _this.attr('href'); $(".tab").removeClass("active"); _this.parent().addClass("active"); $(".leadboardcontent").hide(); $(block).fadeIn(); }); /** * Fade in the Popup */ $('.leaderboard li').on('click', function () { $('#popup').fadeIn(); var mark = $(this).find('name').text(); var small = $(this).find('points').text(); $('#popup-name').text('Name: ' + name); $('#popup-score').text('Score: ' + points); }); }); 

與搜索框相關的js：

 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"); divs=li[0].getElementsByClassName("parent-div"); for (i = 0; i < divs.length; i++) { a = divs[i].getElementsByClassName("name")[0]; if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { divs[i].style.display = ""; } else { divs[i].style.display = "none"; } } } 

Answer 1

搜索正在進行中

編碼中有一些錯誤

• myFunction（）應該超出$（document）.ready（function（）{}），這是jquery
• divs=li[0].getElementsByClassName("parent-div"); 沒有用，沒有這個名字的班級。

所以最后是JS

 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].getElementsByTagName("mark")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
$(document).ready(function() {
  $('.tab a').on('click', function(e) {
    e.preventDefault();
    var _this = $(this);
    var block = _this.attr('href');
    $(".tab").removeClass("active");
    _this.parent().addClass("active");
    $(".leadboardcontent").hide();
    $(block).fadeIn();
  });


  /**
   * Fade in the Popup
   */
  $('.leaderboard li').on('click', function() {
    $('#popup').fadeIn();
    var mark = $(this).find('mark').text();
    var small = $(this).find('small').text();
    $('#popup-name').text('Name: ' + mark);
    $('#popup-score').text('Score: ' + small);
  });
});

演示鏈接 。

希望對您有所幫助。謝謝