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>
・
・
・

via

In-Page Filtered Search With Vanilla JavaScript