Skodev
Belajar coding dalam bahasa Indonesia
Diskon kelas baru hingga 25%! Masukkan kupon "lebihcepat" di kelas ini
XSkodev
Belajar coding dalam bahasa Indonesia
Daftar Isi:
Pada artikel kali ini, kita akan membahas mengenai cara membuat fungsi pencarian di HTML menggunakan JavaScript. Seiring berkembangnya teknologi informasi, fungsi search engine di situs web sangat penting bagaimana pun bentuk situs webnya. Berikut adalah langkah-langkah membuat fungsi search di HTML dengan JavaScript.
Sebelum memulai, kamu perlu memastikan jika sudah memiliki file HTML dan Javascript yang akan digunakan. Jika belum memiliki file tersebut, silahkan buat file baru dengan ekstensi .html dan .js.
Contoh struktur dasar file HTML:
<!DOCTYPE html>
<html>
<head>
<title>Fungsi Pencarian</title>
</head>
<body>
<!-- Konten HTML di sini -->
</body>
</html>Tambahkan input type search dan tombol di dalam file HTML kamu. Formulir pencarian ini nantinya akan digunakan untuk menerima inputan dari pengguna.
Contoh:
<form id="formPencarian">
<input type="search" id="kataKunci" placeholder="Kata kunci">
<input type="button" value="Cari">
</form>Membuat fungsi ini adalah langkah penting. Kamu perlu menuliskan logikanya di file JavaScript.
Contoh:
function pencarian() {
var kataKunci = document.getElementById('kataKunci').value;
// Logika pencarian di sini
}Di sini, kita mendapatkan nilai dari inputan pengguna menggunakan ID ‘kataKunci’.
Berikutnya, kita perlu membuat event listener untuk menangani event saat pengguna menekan tombol ‘Cari’.
Contoh:
document.getElementById('formPencarian').addEventListener('submit', function(e) {
e.preventDefault();
pencarian();
});Langkah terakhir adalah menambahkan logika pencarian. Di sini, kamu bisa menambahkan logika sesuai dengan kebutuhanmu.
Contoh:
function pencarian() {
var kataKunci = document.getElementById('kataKunci').value;
// Dapatkan semua elemen p di halaman web
var paragraf = document.getElementsByTagName('p');
// Lakukan pencarian pada setiap elemen p
for (var i = 0; i < paragraf.length; i++) {
if (paragraf[i].textContent.indexOf(kataKunci) > -1) {
// Jika ditemukan, tampilkan elemen
paragraf[i].style.display = '';
} else {
// Jika tidak ditemukan, sembunyikan elemen
paragraf[i].style.display = 'none';
}
}
}Dengan begitu, fungsi pencarian di HTML dengan JavaScript telah selesai. Kamu sudah bisa melakukan pencarian kata kunci pada halaman web. Semoga bermanfaat!
belajar membuat website kamu dari nol. Cocok untuk pemula
Lihat KelasLink terkait: