Cara Membuat Fungsi Search di HTML dengan JavaScript

By Posted on

Cara Membuat Fungsi Search di HTML dengan JavaScript – Halo Sobat Java! Perlu kamu ketahui, bahwa pada dasarnya fungsi pencarian di halaman web merupakan salah satu fitur yang sangat penting untuk memungkinkan pengguna menemukan informasi dengan mudah.

Dengan menggunakan HTML dan JavaScript, kita dapat membuat kotak pencarian interaktif yang memungkinkan pengguna untuk mencari kata kunci atau frasa dan menampilkan hasil yang sesuai. Dalam artikel kali ini kelasjava akan membahas cara membuat fungsi pencarian di HTML menggunakan JavaScript.

Hal yang Dibutuhkan untuk Membuat Fungsi Search di HTML dengan JavaScript

Sebelum memulai proyek membuat fungsi search di HTML menggunakan JS, pastikan kamu telah menyiapkan beberapa hal berikut:

  • Perangkat laptop.
  • Sublime Text (Editor kode teks).
  • Google Chrome (Peramban web).
  • Niat yang kuat untuk belajar JavaScript.

Cara Mudah Membuat Fungsi Search di HTML dengan JavaScript

1. Siapkan Folder dan File

Pastikan untuk menyiapkan folder proyek dan beberapa file yang diperlukan, berikut lebih lengkapnya untuk pembuatan folder dan file:

  • Buat folder untuk proyek fungsi search yang akan kamu buat.
  • Buat file index.html untuk struktur halaman web.
  • Buat file style.css untuk mendesain tampilan halaman web.
  • Buat file script.js untuk menulis kode JavaScript untuk fungsi pencarian.
Baca Juga:   Cara Membuat Objek JavaScript

2. Buat Kode HTML (index.html)

Buat struktur dasar HTML untuk fungsi pencarian di file index.html untuk kode HTML tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Fungsi Pencarian - By: Kelas Java</h2>
        <input type="text" id="searchInput" placeholder="Cari sesuatu...">
        <ul id="searchResults"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Buat Kode CSS (style.css)

Tambahkan kode CSS untuk mendesain tampilan pencarian sesuai keinginanmu, untuk kode CSS tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

.container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

li:last-child {
    border-bottom: none;
}

li:hover {
    background-color: #f9f9f9;
}

4. Buat Kode JavaScript (script.js)

Tambahkan kode JavaScript untuk membuat logika dari fungsi pencarian, berikut adalah kode yang JS yang bisa kamu salin.

const searchInput = document.getElementById('searchInput');
const searchResults = document.getElementById('searchResults');

searchInput.addEventListener('input', function() {
    const searchTerm = searchInput.value.toLowerCase();
    searchResults.innerHTML = '';

    // Lakukan pencarian di sini (misalnya dengan array data)

    // Contoh data untuk pencarian (ganti dengan data Anda sendiri)
    const data = ['Kelas', 'Java', 'Tempat', 'Belajar', 'Pemula'];

    const filteredData = data.filter(item => item.toLowerCase().includes(searchTerm));

    filteredData.forEach(item => {
        const li = document.createElement('li');
        li.textContent = item;
        searchResults.appendChild(li);
    });
});

5. Jalankan Kode

Setelah semua kode ditulis, jalankan program untuk menampilkan fungsi pencarian dengan cara membuka file index.html pada folder yang kamu simpan tadi, atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih opsi Open in Browser.

6. Menampilkan Hasil

Jika sudah muncul halaman browser baru dan tampil seperti gambar diatas, maka kamu telah berhasil membuat fungsi Search di HTML dengan JavaScript. Untuk melakukan pengujian fungsi pencarian tersebut, kamu bisa mencari kata: ‘Kelas’, ‘Java’, ‘Tempat’, ‘Belajar’, ‘Pemula’ lalu akan muncul hasil pencariannya.

Penutup

Sampai sini dulu tutorial tentang cara membuat fungsi pencarian di HTML dengan JavaScript versi Kelas Java. Ikuti setiap langkahnya dengan teliti agar kamu berhasil menampilkan output yang sesuai dengan gambar hasil dan pastikan juga fungsi pencariannya bisa digunakan.

Related posts: