skip to content

Membuat Fitur Pencarian di Website Statis

Bisa kah?

Biasanya kan yang kita tau itu, fitur pencarian cuma pada website dinamis, misalnya aja website yang dibuat dengan PHP atau Ruby on Rails. Tapi, ternyata, kita juga bisa membuat fitur pencarian di website statis.

Eh, kok bisa?

Jadi, kita cuma mengandalkan JavaScript Fetch API.

Caranya itu seperti ini:

Misalkan kita punya halaman index.html dan about.html yang akan berisi dengan serangkaian teks. Terus, kita buat cari.html yang berisi form pencarian.

Nah, di cari.html itu, intinya itu seperti ini:

Yang pertama, kita list dulu dalam bentuk data, sitemapnya. Artinya, website kita itu isinya apa aja. Kurang lebih seperti ini:

javascript
const sitemap = [
{
title: "Home",
url: "index.html",
},
{
title: "About",
url: "about.html",
},
];

Lalu, dari masing-masing halaman, kita ambil teksnya. Misalnya, kita ambil teksnya dari index.html dan about.html. Lalu, kita cari dah tu berdasarkan kata kunci yang kita inginkan. Di sini, kita menggunakan Fetch API. Contohnya aja seperti ini:

javascript
let ada = [];
let kataKunci = "kata kunci";
for (let x of sitemap) {
fetch(x.url)
.then((response) => response.text())
.then((data) => {
let teks = data.replace(/<[^>]*>?/gm, "");
if (teks.toLowerCase().includes(kataKunci.toLowerCase())) {
ada.push(x);
}
});
}

Nah, dari sini, kita bisa tahu, kalau ada halaman yang sesuai dengan kata kunci yang kita cari. Lalu, tinggal kita tampilkan hasilnya.