search for elements in a list

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

LAST QUESTIONS
All questions
POPULAR ONLINE
jQuery Categories

Laravel 5.4 : Api route list

How to change `x2` Value using D3 line Chart x-Axis? [on hold]

Central web installer for multiple VMs on a network

Mysql subquery or something better

READ ALSO
how to get minimum order amount free shipping in woocommerce checkout page
PHP

how to get minimum order amount free shipping in woocommerce checkout page

I have did following link: How to get minimum order amount for free shipping in woocommerce, but it return NULL resultcan you guys help me fix or return the right minimun order amount on checkout page ?

 465
LDAP Autentication keeps postind &#39;unable to Login: Success&#39; Error
PHP

LDAP Autentication keeps postind 'unable to Login: Success' Error

I've have this code below and I've checked and rechecked but it doesn't seem to work

 2803
Model-&gt;save() =&gt; Same code different controller but doesn&#39;t have same behavior
PHP

Model->save() => Same code different controller but doesn't have same behavior

This a standard code to use a Model in YiiIn my originController, the code is exactly like that but nothing in my mySql DB

 250
multiple function from view to controller
PHP

multiple function from view to controller

i have two function in my controller:-

 299