JavaScriptを使ってリアルタイムフィルターを作ってみました。
仕様
キーワードにマッチする画像のみ表示できるようにする。
HTML & CSS
HTML
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><title>リアルタイムフィルター</title><linkrel="stylesheet"href="main.css"><script src="jquery-3.5.1.min.js"></script></head><body><h2>リアルタイムフィルター</h2><p>入力した文字を含まない要素は非表示となります</p><inputtype="text"class="input_text"placeholder="キーワードを入力してください"><divclass="exhibition"><divclass="filter_img"><divclass="contain_img"><imgsrc="#"alt="airplain"></div><pclass="keywords">キーワード</p><divclass="keyword_list"><p>飛行機</p><p>ひこうき</p><p>hikouki</p></div></div><divclass="filter_img"><divclass="contain_img"><imgsrc="#"alt="dolphin"></div><pclass="keywords">キーワード</p><divclass="keyword_list"><p>いるか</p><p>iruka</p></div></div><divclass="filter_img"><divclass="contain_img"><imgsrc="#"alt="cherry-blossoms"></div><pclass="keywords">キーワード</p><divclass="keyword_list"><p>桜</p><p>さくら</p><p>sakura</p></div></div><divclass="filter_img"><divclass="contain_img"><imgsrc="#"alt="train"></div><pclass="keywords">キーワード</p><divclass="keyword_list"><p>蒸気機関車</p><p>じょうききかんしゃ</p><p>joukikikansya</p></div></div></div><script type="text/javascript"src="main.js"charset="UTF-8"></script></body></html>- input typeをtextにして入力を受け付け、placeholderを設定してデフォルト入力を入れておく。
CSS
body{padding:030px;}.input_text{width:100%;font:16px;height:20px;border:2pxsolid#0d91e9;}.input_text:focus{border:2pxsolidmagenta;outline:0;}.exhibition{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;}.filter_img{border:1pxsolidblue;width:45%;height:auto;margin:20px0;}.contain_img{width:100%;height:25vw;text-align:center;margin-bottom:20px;}img{width:95%;height:100%;margin-top:15px;}.keywords{margin:15px0px-10px15px;}.keyword_list{display:flex;margin-left:15px;margin-top:-15px;}.keyword_listp{margin-right:1em;}- :focusでinputに入力するとき枠線の色が変わるようにしてみました。
JavaScript
JavaScript
functionSearch(text){$(".keyword_list").each(function(index,element){letkeyword=$(element).text();if(keyword.indexOf(text)===-1){$(element).parent().css("display","none");}else{$(element).parent().css("display","block");}});}$(".input_text").on("input",function(event){lettext=$(".input_text").val();if(text===""){$(".filter_img").css("display","block");}else{Search(text);}});- .on("input", function(event){})でキーワードが入力されたときに処理を行う
- 入力された文字をval()で受け取る。
- 入力がないときは、全ての画像を表示するようにする。
- 入力がある時に検索を開始。
- .eachで全てのkeyword_listクラスを処理。
- 検索語がキーワードとマッチしない時（indexOF()が-1)、マッチしていない画像を非表示にする。
- それ以外の時は、画像を表示。
完成
参考文献
jQueryで入力中のテキストをリアルタイムで取得する
jQueryのeachメソッド
【Javascript】親要素や祖先要素を取得する方法 parentNode/closest
画像
全てフリーです。
飛行機 (ThePixelman Pixabay)
イルカ （Claudia14 Pixabay）
桜 (Couleur Pixabay)
機関車 (Harald_Landsrath Pixabay)