[JS]List.jsで要素を検索、並び替え(ソート)、絞り込む方法

こんにちは、むったん（@6ttan）です。

LPや商品比較ブログにおいて、商品の詳細一覧があったりしますがユーザーの目的にあわせて並び替えや絞り込みができたら、と考えたりしませんか。
この仕組みを実装しようとするとまぁまぁ大変なのですが、JSとHTMLをちょろっと書くだけで完成してしまうライブラリを見つけましたので、ご紹介します。

List.jsのサンプル

比較したい商品が思い付かなかったので、大好きなゲーム原神の男性キャラの元素、レアリティ、身長をリスト化してみました。

See the Pen
List.js sample by むったん (@6ttan)
on CodePen.0

検索欄に入力すると該当内容が表示されます。
名前ボタンを押下すると、50音順で昇順 / 降順されます。
身長ボタンを押下すると、身長の高さで昇順 / 降順されます。

これをJSで自分でゴリゴリ書いていくとすごい行数になりますが、List.jsを使うと最短4行で済みます。

HTMLコード

まず親要素にidをふります。
ここではitemsとしています。

次に検索欄とするinputタグには.searchを付与します。
ソートボタンに対しては.sortを付与します。
ソートのボタン要素にはdata属性で、各ボタンのソート対象名を入れておきます。

その他、要素の追加、編集等も可能でそれ用のクラスが準備されているので詳細は公式サイトをご確認ください。

検索結果となる物の親要素に対して.listを付与します。
ここではtbodyタグが親要素となります。

またtableタグだけではなく、ulやdivタグでも結果を表示できますので表現豊かに対応できます！

最後に検索結果、ソート内容に反映したい要素に対して、ソートのボタン要素で準備したdata属性の値と同じクラス名を付与していきます。

JSコード

optionsには検索結果、ソート内容に反映したい要素に対して付与したクラス名を配列で書いていきます。

サンプルコード内に.elementがありますが、これはソートボタンに設定されていない要素で検索した時のみ引っかかるようになっています。

最後に

特に詳しく説明する必要がないくらい、手軽に簡単に実装できるライブラリList.jsのご紹介でした！

上記の他にページネーション（ページャー）、要素の追加、削除（DBがあれば保存可能）もできます。
LPやサイトのコンテンツとしての商品比較や検索に実装してみるのもアリかと思います。