search for elements in a list

10867

February 13, 2017, at 6:18 PM

I have a leader board with two lists which toggle. When I press weekly scorecard - weekly list is displayed and when I press overall Scorecard, overall is displayed. Just for reference, it works a bit like this: https://jsfiddle.net/pvwvdgLn/1/

My list has 1000 employees.

The problem is that the search box, which is used here to search for an employee in the list, does not work. I am trying to find a way to search for an employee in the list.

Here is an image of my leader board: pic for the leader board

I am echoing the list in the leader board from my DB so the link is constantly changing as this is how leader boards are supposed to be.

php involved with the leaderboard :

<div class="tab-content"> 
    <div id="weeklylb" class="leadboardcontent"> 
        <div class="leaderboard" id="leaderboard"> 
        <ol id = "myOL"> 
        <mark> 
        <?php 
            $sql11 = "SELECT * 
            FROM pointsBadgeTable 
            WHERE WeekNumber ='week04' 
            ORDER BY pointsRewarded desc"; 
 
           if(($stmt1221 = sqlsrv_query($conn, $sql11)) != false){ 
             do { 
               while ($row1221 = sqlsrv_fetch_array($stmt1221, SQLSRV_FETCH_ASSOC)) { 
                 $resultt[] = $row1221; 
               } 
             } while (sqlsrv_next_result($stmt1221)); 
             foreach($resultt as $row1221){ 
               // echo '<li><mark data-id="'.$row1221['EmployeeID'].'">'. $row1221['EmployeeName'].'</mark><small>"'.$row1221['pointsRewarded'].'</small></li>'; 
               echo  "<li><mark data-id='".$row1221['EmployeeID']."' class='parent-div'><span class='rank'>" . $row1221['rank'] . "</span><span class='name'>" . $row1221['EmployeeName'] . "</span><span class='points'>" . $row1221['pointsRewarded'] . "</span></mark></li>"; 
               // echo  "<div data-id='".$row1221['EmployeeID']."' class='parent-div'><span class='rank'>" . $row1221['rank'] . "</span><span class='name'>" . $row1221['EmployeeName'] . "</span><span class='points'>" . $row1221['pointsRewarded'] . "</span></div>"; 
             } 
           //  var_dump($resultt); 
            } else { 
            echo 'sql error'; 
            } 
        ?> 
        </mark> 
        </ol> 
    </div> 
    <svg style="display: none;"> 
    <symbol id="cup" x="0px" y="0px" width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
    <path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69 
														C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148 
														C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563 
														c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303 
														c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191 
														c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525 
														c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257 
														c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31 
														c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865 
														c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148 
														C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99 
														c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883 
														L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686 
														c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033 
														C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273 
														C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06 
														c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z" /> 
</div> 
        <!-- weekly div ends --> 
<div id="overalllb" class="leadboardcontent" style="display:none"> 
 
<div class="leaderboard" id="leaderboard"> 
<ol id = "myOL"> 
 
 <mark> 
 
   <?php 
   $q4 = "select * 
   from EmployeeTable 
   order by Total_points_Rewarded desc"; 
 
if(($stmt33 = sqlsrv_query($conn, $q4)) != false){ 
 do { 
   while ($row333 = sqlsrv_fetch_array($stmt33, SQLSRV_FETCH_ASSOC)) { 
     $resulttt[] = $row333; 
   } 
 } while (sqlsrv_next_result($stmt33)); 
 foreach($resulttt as $row333){ 
   // echo '<li><mark data-id="'.$row1221['EmployeeID'].'">'. $row1221['EmployeeName'].'</mark><small>"'.$row1221['pointsRewarded'].'</small></li>'; 
echo  "<li><mark data-id='".$row333['EmployeeID']."' class='parent-div'><span class='rank'>" . $row333['overallRank'] . "</span><span class='name'>" . $row333['EmployeeName'] . "</span><span class='points'>" . $row333['Total_points_Rewarded'] . "</span></mark></li>"; 
// echo  "<div data-id='".$row1221['EmployeeID']."' class='parent-div'><span class='rank'>" . $row1221['rank'] . "</span><span class='name'>" . $row1221['EmployeeName'] . "</span><span class='points'>" . $row1221['pointsRewarded'] . "</span></div>"; 
 } 
//  var_dump($resultt); 
} else { 
 echo 'sql error'; 
} 
 
?> 
</mark> 
</ol> 
  </div> 
  <!-- leaderboard div ends here of overall--> 
 
</div> 
<!-- overall div ends here --> 
 
 
 
</div>

html associated with search box :

<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 that I have tried :

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"; 
      } 
  } 
}

The search-box needs to work for both the list in the leader board. I believe the ol with an id of id="myol" needs to be different for both the list.

Answer 1

Problem is divs=li[0].getElementsByClassName("parent-div"); class parent-div doesnt exisit and more over idea is to iterate over text in li mark tag.

function myFunction() {
      var input, filter, ol, li, a, i;
      input = document.getElementById("search52");
      filter = input.value.toUpperCase();
      if(document.getElementById('overalllb').style.display=="none")
        ol = document.getElementById("myOL");
      else
        ol = document.getElementById("myOLoverAll");
      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";
          }
      }
    }

And for individual search in tab, you need to provide different ids to ol and check which is active in myFunction();

Demo : https://jsfiddle.net/pvwvdgLn/3/