<div class="columns mx-1">
<div class="column is-half is-offset-one-quarter">
<section class="hero is-primary mb-4">
<div class="hero-body">
<p class="title">
Gallery of Cats
</p>
<p class="subtitle">Images from Unsplash.com</p>
</div>
</section>
<section>
<div>
<label for="searchbox" class="is-size-5">Search</label>
<input class='input mb-5' type="search" id="searchbox" placeholder="Live search keyword..">
</div>
<div>
<img class='image' src="https://i.ibb.co/M8JZtzV/Screen-Shot-2021-10-15-at-5-48-47-AM.png" width="100%" height="150"
alt="walking at harbour" />
<img class='image' src="https://i.ibb.co/jV9m8Rd/Screen-Shot-2021-10-15-at-5-48-43-AM.png" width="100%" height="150"
alt="high five with human" />
<img class='image' src="https://i.ibb.co/XFB0F9r/Screen-Shot-2021-10-15-at-5-47-55-AM.png" width="100%" height="150"
alt="snow on the grass" />
<img class='image' src="https://i.ibb.co/jk88PcP/Screen-Shot-2021-10-15-at-5-47-31-AM.png" width="100%" height="150"
alt="butterfly on my nouse" />
<img class='image' src="https://i.ibb.co/QbsMywp/Screen-Shot-2021-10-15-at-5-47-52-AM.png" width="100%" height="150"
alt="chillin on the chair" />
<img class='image' src="https://i.ibb.co/cTsY7Yk/Screen-Shot-2021-10-15-at-5-47-49-AM.png" width="100%" height="150"
alt="kitten is confused" />
<img class='image' src="https://i.ibb.co/6wn8RkL/Screen-Shot-2021-10-15-at-5-47-45-AM.png" width="100%" height="150"
alt="staring at human, sitting on top of table" />
<img class='image' src="https://i.ibb.co/pbqQMng/Screen-Shot-2021-10-15-at-5-47-41-AM.png" width="100%" height="150"
alt="cute kitten on bed" />
<img class='image' src="https://i.ibb.co/ky2QtVs/Screen-Shot-2021-10-15-at-5-47-37-AM.png" width="100%" height="150"
alt="cute kitten under the blanker" />
</div>
</section>
</div>
</div>
let boxes = document.querySelectorAll('.image')
function liveSearch() {
let search_query = document.getElementById("searchbox").value;
for (var i = 0; i < boxes.length; i++) {
if (boxes[i].getAttribute('alt').toLowerCase()
.includes(search_query.toLowerCase())) {
boxes[i].classList.remove("is-hidden");
} else {
boxes[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);
});
This Pen doesn't use any external JavaScript resources.