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>

如何添加搜索功能以过滤名称列表

4 个答案: