如何添加搜索功能以過濾名稱列表

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

如果您只想在客戶端進行過濾，可以執行以下操作：

獲取所有聯系人（例如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 2

您可以使用如下查詢：

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

根據您的查詢，您可以從數據庫中獲取員工狀態。

希望這對你有用。

Answer 3

你想讓我做什么。 如果你想在搜索輸入字段中的建議框比你可以簡單地使用ajax請求來獲取建議表格DB並添加typehead js庫而不是粘貼下面的代碼。

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

Answer 4

這是一個使用您的結構在客戶端進行過濾的工作原型 。

 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>