0

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

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>
4

2 回答 2

3

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();
})
于 2013-02-08T22:52:11.613 回答
0

我假设你愿意使用 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/

于 2013-02-08T22:37:41.673 回答