Question

这里是serach字段的小提琴（这仅供参考）：https://jsfiddle.net/pvwvdgLn/1/

交易是 - 搜索框用于在排行榜的名单列表中搜索员工。（实际上，排行榜包含800名员工，这是从数据库中回应的）

问题：当我切换到整体LB并搜索员工时，搜索框无效。

问题我怀疑：同样的ol id =“myOL”这两个列表的onkeyup =“myFunction（）”调用它。当我切换列表时，它应该从其他id获取数据我设置了整体LB列表。

我尝试了上述我怀疑的事情。但是搞砸了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>

排行榜中两个列表的代码： - 整体领导者

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

与两个标签相关的javascript（每周LB和整体LB）： -

$(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
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); }); });没用。没有这个名字的班级。

所以最后JS

{{1}}

Plunker Link演示。

希望这会有所帮助。谢谢你

如何搜索列表中的项目？

1 个答案: