<div class="columns mx-1">
  <div class="column is-half is-offset-one-quarter">

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

<div class="box">
  <strong>大阪</strong>
  <p>「大坂」という地名は、元は大和川と淀川（現在の大川）に間に南北に横たわる上町台地の北端辺りを指し、古くは摂津国東成郡に属した。</p>
  
    
  <!-- Put any keywords here -->
  <span class="is-hidden">secret</span> 
</div>

<div class="box">
  <strong>京都</strong>
  <p>東アジアでは古来、歴史的に「天子の住む都」「首都」を意味する普通名詞として京（きょう）、京師（けいし）が多く使用されていた。西晋時代に世宗（司馬師）の諱である「師」の文字を避けて京都（けいと）と言うようになり、以後は京、京師、京都などの呼び名が用いられた。</p>
</div>

<div class="box">
  <strong>北海道</strong>
  <p>47都道府県中唯一の「道」である。ブランド総合研究所による「都道府県の魅力度ランキング」で2021年現在、13年連続で1位に選ばれ、観光意欲度、産品購入意欲度でも1位、居住意欲度でも3位となっており、各意欲の面で高い評価を得ている。</p>
</div>
    
<div class="box">
  <strong>福岡</strong>
  <p>九州地方北部に位置し、九州地方の県では最も人口が多い。県庁所在地の福岡市は、九州地方最大の人口を擁する都市であり、西日本においても大阪市に次ぐ人口を擁する都市である。</p>
</div>
    

      
    </section>

  </div>
</div>

let cards = document.querySelectorAll('.box')
    
function liveSearch() {
    let search_query = document.getElementById("searchbox").value;
    
    //Use innerText if all contents are visible
    //Use textContent for including hidden elements
    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");
        }
    }
}

//A little delay
let typingTimer;               
let typeInterval = 500;  
let searchInput = document.getElementById('searchbox');

searchInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(liveSearch, typeInterval);
});