Result
よくあるページ内インクリメンタル検索です。
jQueryを使うコードしか書いてなかったのでVanillaのコードを改めて備忘録として。
JavaScript
let cards = document.querySelectorAll('.box') function liveSearch() { let search_query = document.getElementById("searchbox").value; //すべてのコンテンツが表示されている場合は innerText を使用。 //隠し要素を含む場合はtextContentを使用。 for (var i = 0; i < cards.length; i++) { if(cards[i].textContent.toLowerCase() .includes(search_query.toLowerCase())) { cards[i].classList.remove("is-hidden"); } else { cards[i].classList.add("is-hidden"); } }}//少しだけ遅延let typingTimer; let typeInterval = 500; let searchInput = document.getElementById('searchbox');searchInput.addEventListener('keyup', () => { clearTimeout(typingTimer); typingTimer = setTimeout(liveSearch, typeInterval);}); |
html
<div> <label for="searchbox" class="is-size-5">検索</label> <input class='input mb-5' type="search" id="searchbox" placeholder="キーワードを入力"> </div><div class="box"> <strong>東京</strong> <p>東京は、江戸幕府の所在地の江戸を1868年9月に改称したものである。 「東京」という名称を用いる構想は江戸時代後期の佐藤信淵の書にあり、大久保利通がその書の影響を受けつつ「東京」とすることを建言した。 1869年2月11日1878年（明治11年）に府制を施行[1]、「東京府」となった。</p></div>・・・ |
