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 に答える