HTMLの要素（表 リスト カード等）にソート、検索機能をつける方法
データベースを使わずにWebページに並び替え機能や検索機能をつける方法を紹介します。
list.jsというjavascriptライブラリを使用して実装するのですが、機能によって記述方法が違うので、それぞれ解説していきます。
ライブラリを使用するとなると面倒だと感じるかもしれませんが、意外と簡単にできます。ぜひ試してみてください。
概要
必要最低限の機能がまとまったシンプルで軽量なjavascriptライブラリです。
他のライブラリに依存していないため、list.js単体で動作します。
簡単に使用でき、高速に動作するのが特徴です。
追加できる機能は下記の通りです。
- 検索
- ソート（並び替え）
- フィルター
扱えるHTMLの要素についてですが、リスト（li）、テーブル（table）はもちろんのこと、div要素も対象になるので大体のものに適用することができます。
ダウンロード方法
まずList.jsをダウンロード下記のサイトからダウンロードします。 https://listjs.com/overview/download/
Via Githubと書かれているところに2つのボタンがあるかと思いますが、下側の「Download uncompressed List.js」のほうからダウンロードします。
ボタンをクリックするとjavascriptのソースがブラウザ上に表示されてしまうので、右クリックして「名前を付けてリンク先を保存」からファイルを保存してください。
CDNも用意されているので使いたい方はページ下部のスクリプトを貼り付けてください。
サンプルファイルで動作確認
下記の通り、HTMLファイルのサンプルを用意したので、適当な名前をつけてHTMLファイルとして保存してください。
保存場所はさきほどダウンロードしたlist.jsと同じフォルダにしてください。
<div id="name-list">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
ソート（名前順）
</button>
<ul class="list">
<li>
<h3 class="name">アリス</h3>
<p class="age">20</p>
</li>
<li>
<h3 class="name">ウルフ</h3>
<p class="age">35</p>
</li>
<li>
<h3 class="name">オーエン</h3>
<p class="age">28</p>
</li>
<li>
<h3 class="name">イレーヌ</h3>
<p class="age">18</p>
</li>
<li>
<h3 class="name">エレン</h3>
<p class="age">33</p>
</li>
</ul>
</div>
<script src="list.js"></script>
<script>
var options = {
valueNames: [ 'name', 'age' ]
};
var userList = new List('name-list', options);
</script>
保存したhtmlファイルを開けば検索窓とボタンのついたリストが表示されるはずです。
ボタンを押すと名前があいうえお順に並び替えられます。また、検索窓に名前や年齢の一部を入力すると該当する項目のみが残ります。
基本は以上です。
使い方の解説（リスト編）
サンプルのHTMLファイルを例にして使い方を解説します。
最低限の設定
まず、ul,li要素と並び替えボタン、検索窓をdivで囲む必要があります。そして、そのdiv要素にIDを設定します。
サンプルの場合はid="name-list"と設定していますが、name-listでなくてもOKです。
ただし、そのIDとサンプルの下部に記述しているjavascriptの'name-list'の部分は一致させてください。
var userList = new List('name-list', options);
次にul要素にclass="list"を設定します。ここのクラスは必ずlistにしてください。それ以外のものと指定すると動作しません。
最後に、並び替えや検索の対象としたい要素に共通のクラスを設定します。
サンプルの場合は名前にclass="name"、年齢にclass="age"を設定しています。
スクリプトの部分も簡単に説明しておきます。
<script src="list.js"></script>
これはダウンロードしたlist.jsを読み込んでいる部分なのでこのまま書いてください。
var options = {
valueNames: [ 'name', 'age' ]
};
並び替えや検索の対象となる項目を指定している部分です。名前と年齢、両方を対象にしたいので2つとも指定しています。
optionsは変数名なので適当に決めてOKです。valueNamesは固定なので変更不可です。
var userList = new List('name-list', options);
userListの部分は適当に決めてOKのです。name-listは最初に設定したdiv要素のIDと一致させます。optionsも上で決めた変数名と一致させます。
検索機能の追加
ul要素より前に下記の記述を追加するだけでOKです。クラスは必ずclass="search"にします。
ul要素より後に書くと動作しないので要注意です。
<input class="search" placeholder="Search" />
ソート（並び替え）機能の追加
ul要素より前に下記のようにボタンを設置するだけです。クラスは必ずclass="sort"にします。
また、どの要素でソートするか指定します。サンプルだとdata-sort="name"としているので、名前の順にソートされます。
data-sort="age"とすれば、年齢順にソートされます。ボタンを1回押すと昇順、もう一度押すと降順になります。
<button class="sort" data-sort="name">
ソート（名前順）
</button>
これもul要素より後に書くと動作しません。
使い方の解説（テーブル編）
サンプルファイルを用意したのでlist.jsと同じフォルダにhtmlファイルとして保存してください。
<div id="product-table">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="price">
並べ替え（価格）
</button>
<button class="sort" data-sort="name">
並べ替え（名前）
</button>
<table>
<tbody class="list">
<tr>
<td class="name">pen</td>
<td class="price">120</td>
</tr>
<tr>
<td class="name">notebook</td>
<td class="price">100</td>
</tr>
<tr>
<td class="name">scissors</td>
<td class="price">500</td>
</tr>
<tr>
<td class="name">glue</td>
<td class="price">200</td>
</tr>
</tbody>
</table>
</div>
<script src="list.js"></script>
<script>
var options = {
valueNames: ['name', 'price']
};
var userList = new List('product-table', options);
</script>
tbody要素にclass="list"を設定する必要があるので注意しましょう。table要素ではありません。
他の部分はリストの場合と基本的に同じです。このサンプルでは並び替えのボタンを2つ並べてみました。