skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです
入力内容の絞込みを行う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「Live Filter」サンプル
記事作成：2009年01月07日
▼入力内容の絞込みを行うJavaScript「Live Filter」へのコメントはtwitterにて受け付けています。
twitterでコメントする
前の記事：JavaScriptライブラリ「jQuery」で、いい動きのスライダーを作る「Start/Stop Slider」
次の記事：チラ見せしちゃうJavaScript「Page Peel」
