Shuffle.js - ダイナミックなフィルタ/ソートライブラリ // MOONGIFT Archived

多数のリストの中から目的のものを探す際に、多くの人が目検でチェックしたり、Webブラウザのテキスト検索を使ったりします。これは非効率的で、面倒です。技術の力でもっと効率的にすべきでしょう。とは言え、作り込むのは意外と面倒だったりします。そこで使ってみたいのがShuffle.jsです。

Shuffle.jsの使い方

最初の画面です。すべての要素が出ています。

テキストを入力するとマッチするデータだけにフィルタリングされます。

実際に入力しているところです。

ソートも使えます。検索との組み合わせも可能です。

カテゴリを使ったフィルタリングも行えます。

Shuffle.jsはアニメーションも行われるので、フィルタリングがダイナミックに適用されているのが明確に分かるようになっています。Eコマースサイトの商品一覧などで使ってみても良さそうなライブラリです。

Shuffle.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。