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

[PR]