javascript来隐藏所有与文本输入搜索框的内容不对应的客户端

javascript to hide all clients that do not correspond with contents of text input search box

本文关键字：客户端 搜索 隐藏所 输入 文本 javascript      更新时间：2023-09-26

我有一个从数据库中提取客户端列表的页面，我想添加一个搜索框，该框可以动态隐藏与框中键入的文本不匹配的所有客户端，而无需重新加载页面。

javascript可能做到这一点吗？或者我应该尝试其他方法吗？

我的列表是这样编码的，从数据库中提取信息。

<ul>
    <li><a href="index.php?pg=client&cid=125">Client Name</a></li>
    ...
    ...
    ...
    <li><a href="index.php?pg=client&cid=111">Client Name</a></li>
</ul>
JQuery让您更轻松http://jsfiddle.net/PUNaM/

http://api.jquery.com/contains-selector/

<input id="filter" />    
$("#filter").keyup(function(){
    $("ul>li").hide();
    $("ul>li:contains("+this.value+")").show();
})

我假设您愿意使用jQuery。

首先，您需要有一些方法来通过javascript引用您的列表和文本框。我将使用id作为示例，但它可能是任何东西。

<input type="text" id="search-box" />
<ul id="clients-list">
  <!-- clients list here -->
</ul>

然后，在javascript上，您可以监听keyup事件。

$("#search-box").on("keyup", filterClients);

这将使filterClients函数在用户释放密钥时被调用。有很多方法可以定义这一点，但我将采用简单的方法：

function filterClients(event) {
  var $search = $(event.target);
  var text = $search.val();
  var $clients = $("#clients-list li");
  $clients.each(function() {
    var $client = $(this);
    var clientName = $client.text();
    var searchMatchesName = clientName.toUpperCase().indexOf(text.toUpperCase()) >= 0;
    if(searchMatchesName) {
      $client.show();
    } else {
      $client.hide();
    }
  });
}

这不是最有效或更花哨的方法，但应该足以让你开始。

工作jsFiddle：http://jsfiddle.net/u5WS3/

相关文章：