Kode untuk Fitur Pencarian di Website Statis
Sebelumnya, harus ada file cari.json yang berisi dengan judul dan link.
Kemudian, buat file cari.html yang isinya adalah:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cari</title>
<script src="https://unpkg.com/windicss-runtime-dom"></script>
</head>
<body>
<div class="p-3 app">
<p class="m-0 mb-3">Cari apa?</p>
<form @submit.prevent="cari">
<input
type="text"
v-model="teks"
required
class="w-full border border-zinc-800 rounded shadow p-3 px-4 focus:outline-none text-base"
/>
</form>
<p>Progress: {{~~progress}}%</p>
<div
v-if="ketemu.length > 0"
class="border rounded overflow-hidden rounded-lg"
>
<a
target="_blank"
class="border-b block p-2 no-underline text-black"
:href="x.link"
v-for="x in ketemu"
>{{x.judul}}</a
>
</div>
</div>
<script type="module">
import { createApp } from "https://esm.sh/petite-vue";
createApp({
teks: "",
progress: 0,
ketemu: [],
async cari() {
this.ketemu = [];
this.progress = 0;
let telah_dijelajah = 0;
let data = await fetch("/cari.json");
data = await data.json();
let panjang = data.length;
for (let x of data) {
let ambil = await fetch(x.link);
ambil = await ambil.text();
if (ambil.toLowerCase().includes(this.teks.toLowerCase())) {
this.ketemu.push({
judul: x.judul,
link: x.link,
});
}
telah_dijelajah++;
this.progress = (telah_dijelajah / panjang) * 100;
}
},
}).mount(".app");
</script>
<div class="border-b block p-2 no-underline text-black hidden"></div>
</body>
</html>