Q&A
初期は全部見せてよいのですか？
入力文字の１部でも一致すればいいのですか？完全一致ですか？
前提・実現したいこと
javascriptが反映されず、何故なのか分からず
手詰まりになってしまったので、どこを間違えているのか
教えていただけますと幸いです。
＜参考URLはこちらです＞
https://laptrinhx.com/riarutaimufiruta-zuottemita-4261677846/
発生している問題・エラーメッセージ
javascriptで入力するたびにリアルタイムでフィルタが
更新されるようなコードを書いたが動かない。
javascript
1function Search(text){ 2 $(".keyword_list").each(function(index,element){ 3 let keyword=$(element).text(); 4 if(keyword.indexOF(text) === -1){ 5 $(element).parent().css("display","none"); 6 }else{ 7 $(element).parent().css("display","block"); 8 } 9 }); 10} 11 12$(".input_text").on("input",function(event){ 13 let text=$(".input_text").val(); 14 if(text === ""){ 15 $(".filter_img").css("display","block"); 16 }else{ 17 Search(text); 18 } 19}); 20
html
1<!DOCKTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>javascript リアルタイムフィルター</title> 6 <link rel="stylesheet" href="style.css"> 7 <script src="jquery-3.5.1.min.js"></script> 8 9 </head> 10 <body> 11 <h2>リアルタイムフィルター</h2> 12 <p>入力した文字を含まない要素は非表示</p> 13 14 <input type="text" class="input_text" placeholder="Search Word"> 15 <div class="exhibition"> 16 <div class="filter_image"> 17 <div class="contain_img"> 18 <img src="https://www.photock.jp/photo/middle/photo0000-4559.jpg" alt="Asakusa"> 19 </div> 20 <p class="keywords">キーワード</p> 21 <div class="keyword_list"> 22 <p>浅草</p> 23 <p>あさくさ</p> 24 <p>Asakusa</p> 25 </div> 26 </div> 27 <div class="filter_image"> 28 <div class="contain_img"> 29 <img src="https://www.photock.jp/photo/middle/photo0000-2588.jpg" alt="Odaiba"> 30 </div> 31 <p class="keywords">キーワード</p> 32 <div class="keyword_list"> 33 <p>お台場</p> 34 <p>おだいば</p> 35 <p>Odaiba</p> 36 </div> 37 </div> 38 <div class="filter_image"> 39 <div class="contain_img"> 40 <img src="https://www.photock.jp/photo/middle/photo0000-6370.jpg" alt="Shibuya"> 41 </div> 42 <p class="keywords">キーワード</p> 43 <div class="keyword_list"> 44 <p>渋谷</p> 45 <p>しぶや</p> 46 <p>Shibuya</p> 47 </div> 48 </div> 49 <div class="filter_image"> 50 <div class="contain_img"> 51 <img src="https://www.photock.jp/photo/middle/photo0000-1336.jpg" alt="Shinjyuku"> 52 </div> 53 <p class="keywords">キーワード</p> 54 <div class="keyword_list"> 55 <p>新宿</p> 56 <p>しんじゅく</p> 57 <p>Shinjyuku</p> 58 </div> 59 </div> 60 </div> 61 </div> 62 <script type="text/javascript" src="main.js" charset="UTF-8"></script> 63 64 </body> 65</html> 66
css
1.filter_image{ 2 display: inline-block; 3 border:1px solid black; 4 margin:20px 0; 5} 6 7img{ 8 width:300px; 9}
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答2件
0
完全一致
javascript
1$(function(){ 2 $(".input_text").on("input",function(event){ 3 let text=$(this).val(); 4 $('.keyword_list').each(function(){ 5 var a=$(this).find('p').map(function(){ 6 return $(this).text(); 7 }).get(); 8 $(this).closest('.filter_image').toggle($.inArray(text,a)>=0); 9 }); 10 }); 11});
部分一致
javascript
1$(function(){ 2 $(".input_text").on("input",function(event){ 3 let text=$(this).val(); 4 $('.keyword_list').each(function(){ 5 var a=$(this).find('p').map(function(){ 6 return $(this).text(); 7 }).get(); 8 $(this).closest('.filter_image').toggle(new RegExp(text).test(a.join(String.fromCharCode(10)))); 9 }); 10 }); 11});
投稿2021/05/13 09:29
編集2021/05/13 10:05総合スコア115010
0
javascriptの4行目が誤っているのではないでしょうか。
indexOF -> indexOf
diff
1function Search(text){ 2 $(".keyword_list").each(function(index,element){ 3 let keyword=$(element).text(); 4- if(keyword.indexOF(text) === -1){ 5+ if(keyword.indexOf(text) === -1){
投稿2021/05/13 08:56
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
