実現したいこと
javascriptで、部分一致検索の機能を作りましたが、部分一致検索かつアンド検索にしたいです。
全角スペース、半角スペースのどちらでもアンド検索ができるようにしたいと考えています。
発生している問題・分からないこと
アンド検索にする方法がわかりません
該当のソースコード
<div class="history"> <div class="search"> <input type="search" id="input" onkeyup="javaSearch()" placeholder="Search"><br> <input type="button" value="#news" onclick="news();javaSearch()"> <input type="button" value="#media" onclick="media();javaSearch()"> <input type="button" value="#TV" onclick="TV();javaSearch()"> <input type="button" value="#release" onclick="release();javaSearch()"> <input type="button" value="#event" onclick="event1();javaSearch()"> </div> <div class="history1"> <details class="first" open> <summary><span class="title">2020</span></summary> <div class="year"> <!--10月--> <div class="month"> <details class="month1" open><summary><div class="daily notdaily"><p>10 <br> </p></div></summary> <div class="month2"> <!--14日--> <div class="daily1"> <div class="daily"> <h2>14</h2> <p class="all"><a href="" target="mini">スタート</a><br>#news</p> </div> </div> <!----> <div class="daily1"> <div class="daily"> <h2>11</h2> <p>おおおおa</p> </div> </div> </div> </details> </div> </div> </details> <details open> <summary><span class="title">2024</span></summary> <div class="year"> <!--1月--> <div class="month"> <details class="month1" open><summary><div class="daily notdaily"><p>1 <br> </p></div></summary> <div class="month2"> <!--1日--> <div class="daily1"> <div class="daily z-1"> <h2><a href="" target="mini" onClick="window.open('白紙.html', 'big');">1</a><span>Mon</span> </h2> <p class="all"><a href="" target="mini" onClick="window.open('', 'big');">決定</a><br>#event</p> </div> <div class="daily z-2"> <h2><a href="" target="mini" onClick="window.open('白紙.html', 'big');">1</a><span>Mon</span> </h2> <p><a href="" target="mini" onClick="window.open('https://www.joqr.co.jp/qr/program/', 'big');">文化放送|</a><br><br>#media</p> </div> </div> </div> <script> //部分検索 function javaSearch() { document.querySelectorAll('.daily').forEach(item => item.querySelectorAll('p')[0].innerText.toLowerCase().indexOf(document.querySelector('#input').value.toLowerCase()) > -1 ? item.style.display = 'block' : item.style.display = 'none'); } let 検索 = document.getElementById('input'); function news() { 検索.value = "#news"; } function media() { 検索.value = "#media"; } function TV() { 検索.value = "#TV"; } function release() { 検索.value = "#release"; } function event1() { 検索.value = "#event"; } </script>
試したこと・調べたこと
上記の詳細・結果
検索をしたり、試してみましたが解決策が見つかりませんでした。
補足
特になし
0 コメント