[LiveFilterライブラリ] リストタグ内の文字列を検索する

説明

LiveFilterライブラリでリストタグ内の文字列を検索するには検索したいリストタグ全体をdivタグで囲みID名を割り当てておきます(ID名だけでなく特定可能な位置やスタイルシートクラス名であればよい)。次にdivタグ内に検索用のテキストフィールドを用意します。
$()にリストタグ全体を囲んでいるdivタグを指定した後、liveFilter()メソッドを呼び出します。liveFilter()メソッドのパラメータには"ul"を指定すればリストタグ内が検索対象になります。

サンプルプログラム

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.liveFilter.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>LiveFilterサンプル</h1>
<div id="live_filter">
<input type="text" class="filter" name="liveFilter">
<ul>
<li>Adobe Photoshop CS5</li>
<li>Adobe Illustrator CS5</li>
<li>Adobe InDesign CS5</li>
<li>Adobe Creative Suite CS5</li>
<li>Microsoft Windows 95</li>
<li>Microsoft Windows 98</li>
<li>Microsoft Windows Me</li>
<li>Microsoft Windows 2000</li>
<li>Microsoft Windows XP</li>
<li>Microsoft Windows Vista</li>
<li>Microsoft Windows 7</li>
<li>Microsoft Excel</li>
<li>Microsoft Word</li>
<li>Microsoft Excel 2000</li>
</ul>
</div>
</body>
</html>

【sample.js】
$(function(){
$("#live_filter").liveFilter("ul");
});
サンプルを実行
[戻る]