How can i add a search functionality to filter the list of names

Question

I had retrieved a list of employees from the database using php code and I want to add a search functionality to filter the names.

How can I do this using js or php? I got struct in this from last one week, searched online but unable to find the solution.

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Search Name">

<ul id="myUL" class="contacts-list">
  <?php
  $status=1;
  $sql1 =  $dbh->prepare("SELECT * FROM employee WHERE status='$status'");
  $sql1->execute();

  if($sql1->rowCount() > 0) { 
    while($row = $sql1->fetch(PDO::FETCH_ASSOC)){
  ?>
      <li>
        <a href="messages.php?employee_id=<?php echo $row['employee_id']; ?>">
          <div class="contacts-list-info">
            <span class="contacts-list-name">
          <?php echo $row['fname']." ".$row['lname']; ?>
            <small class="contacts-list-date pull-right">
              <?php if($row['status'] == '1') { echo 'Online'; } else { echo 'Offline'; } ?>
            </small>
          </span>
            <span class="contacts-list-msg">
            <?php echo $row['role']; ?>
          </span>
          </div>
        </a>
      </li>
  <?php
    }
  }
  ?>
</ul>

Answer 1

If you want to filter just on the client side, you can do something like this:

Get all contacts (eg li tags) and apply a filter based on the users input.

 function search() { var input = document.getElementById('search').value.toLowerCase(); var contacts = document.getElementsByTagName('li'); for (var i = 0; i < contacts.length; i++) { if (contacts[i].innerText.toLowerCase().includes(input)) { contacts[i].style.display = "block"; } else if (!contacts[i].innerText.toLowerCase().includes(input)) { contacts[i].style.display = "none"; } } } 

 <input type="text" id="search" onkeyup="search()"> Enter something to filter <br> <ul> <li>Some Dude</li> <li>Some Dudine</li> <li>John Doe</li> <li>Erica Doe</li> </ul> 

Answer 2

You can use like query as below:

Select * from employee where status LIKE '%$status%';

As per your query you can get employee status from database.

Hope this works for you.

Answer 3

What do you want to do. If you want suggestion box like in search input field than u can simple use ajax request to fetch suggestion form DB and add typehead js library and than paste following code.

$('#id').typeahead({
                ajax: {
                    url: '../employeeList',
                    method: 'post',
                    triggerLength: 1
                }
            });

Answer 4

Here is a working exapmle for filtering in client-side using your structure.

 document.getElementById("myInput").addEventListener('keyup', function() { var input = this.value.toLowerCase(); var people = document.getElementsByClassName("contacts-list-info"); for (var i of people) { if (i.innerText.toLowerCase().includes(input)) { i.closest("li").style.display = "list-item"; } else { i.closest("li").style.display = "none"; } } }); 

 <input type="text" id="myInput" placeholder="Search for names.." title="Search Name"> <ul id="myUL" class="contacts-list"> <li> <a href="messages.php?employee_id=1"> <div class="contacts-list-info"> <span class="contacts-list-name"> Test Test <small class="contacts-list-date pull-right"> Offline </small> </span> <span class="contacts-list-msg"> Manager </span> </div> </a> </li> <li> <a href="messages.php?employee_id=1"> <div class="contacts-list-info"> <span class="contacts-list-name"> Second Test <small class="contacts-list-date pull-right"> Online </small> </span> <span class="contacts-list-msg"> Manager </span> </div> </a> </li> <li> <a href="messages.php?employee_id=1"> <div class="contacts-list-info"> <span class="contacts-list-name"> Third Test <small class="contacts-list-date pull-right"> Online </small> </span> <span class="contacts-list-msg"> Employee </span> </div> </a> </li> <li> <a href="messages.php?employee_id=1"> <div class="contacts-list-info"> <span class="contacts-list-name"> Fourth Test <small class="contacts-list-date pull-right"> Offline </small> </span> <span class="contacts-list-msg"> Team member </span> </div> </a> </li> </ul>