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

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

sponsors

「入力内容の絞込みを行うJavaScript「Live Filter」」をシェアする

記事作成:
記事URL:

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