Как добавить функцию поиска для фильтрации списка имен

Question

Я получил список сотрудников из базы данных, используя код php, и я хочу добавить функцию поиска для фильтрации имен.

Как я могу сделать это, используя js или php?Я получил информацию об этом за последнюю неделю, искал в Интернете, но не смог найти решение.

<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

Вот рабочий пример для фильтрации на стороне клиента по вашей структуре.

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>

Answer 2

Что вы хотите сделать. Если вы хотите поле предложения, как в поле ввода поиска, вы можете просто использовать ajax-запрос, чтобы получить форму предложения БД и добавить библиотеку typehead js, а затем вставить следующий код.

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

Answer 3

Если вы хотите фильтровать только на стороне клиента, вы можете сделать что-то вроде этого:

Получить все контакты (например, li теги) и применить фильтр на основе ввода пользователя.

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 4

Вы можете использовать как запрос, как показано ниже:

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

По вашему запросу вы можете получить статус сотрудника из базы данных.

Надеюсь, это работает для вас.