事前準備:
公式サイトからダウンロードして解凍しておく
1.jquery.jsとlist.jsファイルを読み込む
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="list.min.js"></script>
</head>
<body>
...
<body>
</html>
2.valueNamesに検索対象文字列が格納されたクラス名を入力する
...
<div id="main">
<ul>
<li><h3 class="
title">title1</h3></li>
<li><h3 class="
title">title2</h3></li>
</ul>
<script type="text/javascript">
var options = {
valueNames: ['title']
};
var threadList = new List('main', options);
</script>
</div>
...
3.リストタグを含む親タグのidを引数に渡してListの作成
...
<div id="
main">
<ul>
<li><h3 class="title">title1</h3></li>
<li><h3 class="title">title2</h3></li>
</ul>
<script type="text/javascript">
var options = {
valueNames: ['title']
};
var threadList = new List('main', options);
</script>
</div>
...
4.<input class="search"/>タグを設置
...
<div id="main">
<input class="search" placeholder="Search" />
<ul>
<li><h3 class="title">title1</h3></li>
<li><h3 class="title">title2</h3></li>
</ul>
<script type="text/javascript">
var options = {
valueNames: ['title']
};
var threadList = new List('main', options);
</script>
</div>
...
<head>タグ内でスクリプト書いてもうまく動かなかった
この書き方じゃないと動かないのかな・・・よくわからんです