入力内容の絞込みを行うJavaScript「Live Filter」

多くのリストから絞り込む時にこんなツールがあると便利でしょう。
JavaScriptライブラリ「jQuery」プラグインのLive Filterを使用するとボックスに入れた内容で絞込みが出来ます。

使用方法

Live Filterからjquery.liveFilter.jsをjQueryからjquery.jsをダウロードします。


<script type="text/javascript" src="jquery-1.2.6.min.js"></script>

<script type="text/javascript" src="jquery.liveFilter.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	$('#results').liveFilter('ul');

});

</script>

上記を書く込んだら、さらに以下のように記述すれば完成です。


<div id="search">
 <input class="filter" type="text" name="filter" />		
</div>
<div id="results">
 <ul>
  <li>リスト1</li>
  <li>リスト2</li>
　　・・・・
 </ul>
</div>

サンプル

Javascriptサンプルページ一覧