Halo Sobat Blogger! Pernah gak sih kamu mengunjungi sebuah web app atau blog, lalu saat mengetik di kolom pencarian, hasilnya langsung muncul detik itu juga tanpa perlu loading pindah halaman? Rasanya responsif dan keren banget, kan?
Fitur ini namanya Live Search atau pencarian instan. Nah, kabar baiknya, membuat fitur canggih ini ternyata gak sesulit yang kamu bayangkan. Kita gak butuh database yang rumit seperti MySQL dulu. Untuk skala web app sederhana, blog portofolio, atau aplikasi single-page, kita bisa memanfaatkan data yang disimpan di dalam Array JavaScript.
Yuk, kita bahas bersama Cara Membuat Fitur Pencarian Cepat (Live Search) Berbasis Array Data di Web App kamu sendiri. Tutorial ini dibuat sesimpel mungkin, jadi buat kamu yang baru belajar HTML dan JavaScript, dijamin pasti langsung paham!
Mengapa Harus Menggunakan Live Search Berbasis Array?
Sebelum masuk ke tutorial, mungkin kamu bertanya-tanya: "Kenapa harus pakai array data?" Ada beberapa keuntungan utama mengapa teknik ini sangat populer untuk web app berskala kecil hingga menengah:
Kecepatan Super Kilat: Karena data sudah dimuat di awal dalam bentuk array (memori browser), proses pencarian terjadi secara instan tanpa perlu menunggu respon server.
Hemat Kuota & Bandwidth: Tidak ada proses request bolak-balik ke database setiap kali pengguna mengetik huruf.
Pengalaman Pengguna (UX) yang Lebih Baik: Pengunjung web app kamu tidak akan bosan menunggu loading halaman.
Persiapan Sebelum Memulai
Untuk mempraktikkan cara membuat fitur pencarian cepat (live search) berbasis array data di web app ini, kamu hanya perlu menyiapkan dua alat tempur utama:
Aplikasi Text Editor: Bisa pakai Visual Studio Code, Sublime Text, atau bahkan Notepad++.
Browser: Google Chrome, Mozilla Firefox, atau Edge untuk melihat hasilnya.
Kita akan menggabungkan kode HTML, CSS, dan JavaScript dalam satu file agar kamu lebih mudah memahaminya. Yuk, buka text editor kamu dan buat file baru dengan nama livesearch.html.
Langkah demi Langkah Membuat Live Search Sederhana
Mari kita bedah kodenya satu per satu. Silakan salin (copy) kode di bawah ini ke dalam file livesearch.html yang sudah kamu buat, lalu kita pelajari cara kerjanya bersama-sama.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial Live Search Array Data</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
color: #333;
padding: 20px;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #fff;
padding: 25px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #2c3e50;
}
#searchBar {
width: 100%;
padding: 12px;
margin-bottom: 20px;
border: 2px solid #ddd;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
outline: none;
transition: border-color 0.3s;
}
#searchBar:focus {
border-color: #3498db;
}
.list-item {
padding: 10px 15px;
border-bottom: 1px solid #eee;
list-style: none;
}
.list-item:last-child {
border-bottom: none;
}
#resultList {
padding: 0;
margin: 0;
}
.no-result {
color: #e74c3c;
text-align: center;
list-style: none;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h2>Cari Artikel Blog</h2>
<input type="text" id="searchBar" placeholder="Ketik judul artikel di sini...">
<ul id="resultList"></ul>
</div>
<script>
// 1. Data Array yang akan kita cari
const daftarArtikel = [
"Cara Membuat Blog Pemula",
"Tips SEO Agar Artikel Ranking 1 Google",
"Tutorial HTML Dasar untuk Blogger",
"Cara Mengajukan Google AdSense Agar Diterima",
"Optimasi Kecepatan Website WordPress",
"Panduan Memilih Domain dan Hosting Terbaik",
"Cara Menghasilkan Uang dari Blog"
];
// 2. Mengambil elemen HTML
const searchBar = document.getElementById('searchBar');
const resultList = document.getElementById('resultList');
// 3. Fungsi untuk menampilkan data ke layar
const tampilkanData = (itemKumpulan) => {
// Jika data kosong atau tidak ditemukan
if (itemKumpulan.length === 0) {
resultList.innerHTML = `<li class="no-result">Artikel tidak ditemukan 😥</li>`;
return;
}
// Memetakan data array menjadi baris HTML
const htmlString = itemKumpulan
.map((item) => {
return `<li class="list-item">${item}</li>`;
})
.join('');
resultList.innerHTML = htmlString;
};
// Tampilkan semua data saat pertama kali halaman dimuat
tampilkanData(daftarArtikel);
// 4. Logika Fitur Pencarian Cepat (Live Search)
searchBar.addEventListener('keyup', (e) => {
const kataKunci = e.target.value.toLowerCase(); // Mengubah input jadi huruf kecil semua
// Memfilter array berdasarkan kata kunci
const hasilFilter = daftarArtikel.filter((artikel) => {
return artikel.toLowerCase().includes(kataKunci);
});
// Tampilkan hasil filter ke layar
tampilkanData(hasilFilter);
});
</script>
</body>
</html>
Bedah Cara Kerja Logika Live Search JavaScript
Agar kamu tidak sekadar copy-paste, mari kita pahami logika di balik kode JavaScript di atas. Konsep pencarian instan ini sebenarnya hanya dibagi menjadi 3 bagian penting:
1. Menyiapkan Sumber Data (Array)
Pada variabel daftarArtikel, kita menyimpan data dalam bentuk array string. Di dunia nyata atau aplikasi yang lebih kompleks, data ini bisa berupa data JSON yang kamu ambil dari API atau database backend.
2. Menggunakan Event Listener keyup
Fungsi searchBar.addEventListener('keyup', ...) bertugas untuk "mengintip" setiap kali jari pengguna mengangkat tombol keyboard di kolom input. Setiap kali ada ketikan baru, fungsi di dalamnya langsung berjalan secara otomatis saat itu juga.
3. Keajaiban Fungsi filter() dan includes()
Ini adalah inti dari Cara Membuat Fitur Pencarian Cepat (Live Search) Berbasis Array Data di Web App.
Fungsi
filter()akan menyaring seluruh isi array.Fungsi
includes()mengecek apakah kata kunci yang diketik pengguna ada di dalam judul artikel.Kita juga menggunakan
toLowerCase()supaya pencariannya tidak sensitif huruf besar-kecil (misal: mengetik "blog" atau "Blog" hasilnya tetap sama).
💡 Tips Tambahan untuk Blogger Pemula: Jika web app kamu nantinya memiliki data yang sangat banyak (ribuan data), fitur pencarian array langsung seperti ini bisa sedikit membebani browser. Solusinya, kamu bisa menambahkan fungsi Debounce pada JavaScript agar pencarian baru berjalan setelah pengguna selesai mengetik selama beberapa milidetik. Namun untuk ratusan data, kode di atas sudah sangat aman dan super cepat!
Kesimpulan
Membuat web aplikasi yang interaktif dan ramah pengguna kini tidak harus selalu rumit. Dengan menerapkan Cara Membuat Fitur Pencarian Cepat (Live Search) Berbasis Array Data di Web App, kamu bisa meningkatkan level profesionalisme proyek web atau template blog kamu secara signifikan.
Hanya dengan modal HTML dasar, sedikit sentuhan CSS agar manis di layar HP, dan logika sederhana JavaScript (filter dan includes), fitur pencarian instan ala aplikasi modern sudah berhasil kamu miliki!
Selamat mencoba, semoga tutorial ini bermanfaat, dan jangan ragu untuk memodifikasi tampilannya agar makin keren, ya! Kalau ada langkah yang membingungkan, silakan tulis pertanyaanmu di kolom komentar. Sampai jumpa di tutorial blogging berikutnya!
0 Response to "Cara Membuat Fitur Pencarian Cepat (Live Search) Berbasis Array Data di Web App"
Posting Komentar