下記のようにサイト内検索を実装しましたが、挙動がおかしく、ご相談させてください。
##検索窓設置側のhtml -index.htmlを含む複数ページのヘッダー
html
1 <form action="search-result/result.html" autocomplete="on" method="get"> 2 <input id="search-input" placeholder="サイト内検索" type="text" name="search-key" > 3<input id="search-buttom" class="" type="submit" value=""> 4 </form>
##検索結果吐き出し側のhtml /search-result/result.html
html
1<section class="result_contents"> 2 <h2 class="result_title">検索結果</h2> 3 <ul id="result_wrapper"> 4 5 </ul> 6 </section>
javascript
1<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 2 3<script> 4 let v = new URLSearchParams(window.location.search); 5 v = v.get('search-key'); 6 const urlLists = [ 7"http://localhost/fujisawa_international_university/about/select/index.html", 8 "http://localhost/fujisawa_international_university/about/access/index.html", 9 "http://localhost/fujisawa_international_university/contact/form/index.html", 10 "http://localhost/fujisawa_international_university/contact/index.html"]; 11 $.each(urlLists, function(i){ 12 $.ajax({ 13 url : urlLists[i], 14 dataType : 'html', 15 success : function(data){ 16 17 if( $(data).find("#article").text().indexOf(v) !== -1){ 18 19 $('<li><a href="' + urlLists[i] + '">' +$(data).find(".h1_style").text() + '</a></li>').appendTo('#result_wrapper'); 20 } 21 }, 22 error: function(data){ 23 console.log("error") 24 } 25 }); 26 }); 27</script> 28
現在のテスト環境はXAMPPです。その後実サーバーにアップロード予定です。
挙動がおかしい。と本人が思っているのは、検索窓search-keyに入力された検索文言を拾わないということです。検索窓に何も入力せずにリターンすると#articleで拾いに行ったh1_styleを全て表示してくれます。
現在、firefoxのコンソールパネルにエラーは表示されていません。
昨日まで動いていたのですが、別の場所のデザイン崩れを修正していたところ、挙動がおかしくなりました。
アドバイスいただけますと幸いです。
どうぞよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー