[WPプラグイン]テーブル内のデータを検索できる機能「QuickSearch」プラグイン
最終更新日:2021.10.01 [金] 公開日:2017.07.19 [水] カテゴリー:WordPressプラグイン
テーブルやリストからデータを検索できる便利なプラグイン「QuickSearch」について。 以前数回使ったことはあったのですが、ここしばらく使う機会がなく、久々に最近使ったので備忘的に。
とっても便利で気持ちよい動きのプラグインです。
https://github.com/DeuxHuitHuit/quicksearch
MITライセンスです。
本当に最低限すぎるくらい、最低限の設定しかしていませんが。。。
Jqueryの後に落としてきたプラグインを入れます。
1 2 3 4 5 6 7 8 9 |
<!--QuickSearch--> <script src="/js/jquery-1.12.4.js"></script> <script src="/js/jquery.quicksearch.js"></script> <script> $(function () { $('input#id_search').quicksearch('table#test tbody tr'); }); </script> <!--QuickSearch--> |
ヘッダー内に上記を記述しましたら、bodyの中に以下のように、テーブルを書きましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<table id="test"> <tbody> <tr> <th>名前</th> <th>記号</th> <th>その他</th> </tr> <tr> <td>わ</td> <td>wa</td> <td>294</td> </tr> </tbody> </table> |
DEMO
名前 | 記号 | その他 |
---|---|---|
あ | aiueo | 1234 |
あ | ***** | 1234 |
か | kakikukeko | 5678 |
さ | sasi | 91011 |
た | tati | 1213 |
な | nani | 1415 |
は | hahi | 300 |
ま | mami | 1000 |
や | yayu | 0 |
ら | rari | 447 |
わ | wa | 294 |
複数ワードも検索もできて、動きもサクサクでなんか気持ちいです。
他にもロード画像が出せたり、いろんなオプションがあるみたいなのですが、それは是非本家サイトで・・・
コメントを残す