画像やPDFも載せられる絞り込み機能付きリストがほしい
自分が過去に作ったページとか画像などを見返す必要が時々あって、リストにして管理したかった。
外部サービスを使うほどでは無かったので、パワポに画像を貼り付けてリストっぽくしてctrl+Fで探したりしてたけど、絞り込みできないから不便だった。エクセルだと画像やPDFを含む絞り込みは厳しい。
なので、htmlだけでそれっぽいリストを作成しました。
データはJS内の配列で羅列。
移動させやすいようにCSSもJSも全部htmlファイルにインラインで入れてしまっているので、ミニマムこの1ファイルだけでOKです。
jQueryをCDN読み込みじゃなくてダウンロードすれば、オフラインでも使えますね。
See the Pen easysearch by wataru (@watar) on CodePen.
▼検索フォーム周り
プルダウンの値とキーワードは掛け合わせで検索可。単純にtd内のテキストを全件findしてるだけです。
リセットボタンで、絞り込み全部解除＆フォームリフレッシュするようにしています。
▼テーブル
JSの最初の配列にデータ羅列したら、自動的にhtmlのテーブルが生成されるようにしています。
上記の例ではテキストと画像を入れているけど、<object>タグを使ってPDFを読み込んだり、リンクにしたり、まとめたい情報によって変えると良いと思います。
上記の例ではqiitaにアップした画像を使っていますが、相対パスでローカルの画像を読みこむようにすれば通信が発生しないのでサクサクです。
（<object>タグや<embed>タグで埋め込むようにすると、数十件以上あると激重になるのでそこだけ注意です。<object>でPDF資料200ページ分読み込むようにしたら表示に1分半かかった）