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/