Dokumentasi dengan banyak topik kerap membuat pengunjung malas menggulir daftar yang panjang. Kolom saring kecil di atas sidebar menyelesaikannya: setiap ketukan huruf langsung menyembunyikan topik yang tak memuat kata itu, sehingga daftar menyusut ke topik yang relevan. Bagian penutup proyek ini menambahkan penyaring tersebut dengan JavaScript dari section HTML dan JavaScript — satu event listener, satu atribut, tanpa pustaka apa pun.

Menambahkan Kolom Saring pada Sidebar #

File dokumentasi-pencarian.html pada folder bagian ini adalah dokumentasi-styling.html yang ditambah tag script di head, satu label, dan satu input di dalam nav sidebar:

html Cuplikan dokumentasi-pencarian.html 
  <link rel="stylesheet" href="../styles/style.css">
  <script src="pencarian.js" defer></script>
  <!-- baris 12-19: header dan pembuka main -->
    <nav aria-label="Daftar topik">
      <label for="kolom-cari">Saring topik</label>
      <input type="search" id="kolom-cari" name="kolom-cari" autocomplete="off" placeholder="mis. memulai">
      <ul id="daftar-topik">
        <li><a href="#pengenalan">Pengenalan</a></li>
        <!-- tiga butir lain menyusul -->
        <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
      </ul>
    </nav>

Tiga keputusan kecil di sini penting untuk aksesibilitas. Label dengan pasangan for/id memberi nama pada kolom saring sehingga pembaca layar menyebutnya “Saring topik”, bukan sekadar “kolom sunting”. Atribut type="search" menghadirkan bentuk kolom pencarian beserta tombol bersihkan pada sebagian browser. Atribut autocomplete="off" menonaktifkan saran isian lama yang justru mengganggu penyaring langsung.

Skrip Penyaring Topik #

Interaksinya digerakkan oleh file pencarian.js yang berdampingan dengan halamannya:

javascript pencarian.js 
// pencarian.js — penyaring topik sidebar untuk proyek Halaman Dokumentasi.
// Dipakai bersama dokumentasi-pencarian.html pada folder part-4-pencarian-sederhana/.

const kolomCari = document.querySelector("#kolom-cari");
const daftarTopik = document.querySelector("#daftar-topik");
const butirTopik = daftarTopik.querySelectorAll("li");

kolomCari.addEventListener("input", function () {
  const kata = kolomCari.value.trim().toLowerCase();
  butirTopik.forEach(function (butir) {
    const teks = butir.textContent.toLowerCase();
    butir.hidden = kata !== "" && !teks.includes(kata);
  });
});

Output yang Dihasilkan:

text 
Saat halaman baru dibuka:
  - Sidebar menampilkan label "Saring topik", kolom saring, dan lima topik
Saat huruf "mem" diketik pada kolom saring:
  - Butir "Memulai" dan "Memformat Catatan" tetap tampil
  - Tiga butir lainnya tersembunyi dari daftar
Saat kolom saring dikosongkan:
  - Kelima topik tampil kembali lengkap

Mari kita bedah skrip tersebut:

  1. Baris 4-6: querySelector mengambil referensi kolom saring, daftar topik, dan seluruh butir li di dalamnya; daftar diambil lebih dulu agar pencarian butir tidak ikut menangkap elemen lain.
  2. Baris 8: listener dipasang pada event input, yang menyala setiap kali nilai kolom berubah — termasuk saat mengetik, menempel, atau membersihkan isian.
  3. Baris 9: nilai kolom dibersihkan dari spasi tepi dengan trim() dan diseragamkan huruf kecilnya dengan toLowerCase(), sehingga “Memulai” tetap cocok dengan isian “mem”.
  4. Baris 10-13: setiap butir dibandingkan dengan isian; butir yang tak memuat kata disembunyikan lewat butir.hidden = true, sedangkan butir yang cocok — atau seluruh butir saat kolom kosong — ditampilkan kembali.

Atribut hidden dipilih karena bekerja dua arah: browser tidak merender butir yang tersembunyi, dan butir itu juga keluar dari urutan fokus keyboard serta dari teks yang dibaca pembaca layar. Penyaring yang menyembunyikan butir hanya secara visual sementara fokus keyboard masih mendarat padanya justru membingungkan.

Keterbatasan Pencarian Sederhana #

Penyaring ini disengaja tetap sederhana, dan batasannya perlu diakui:

  • Perbandingan hanya menyentuh teks tautan sidebar, bukan isi artikel; kata yang muncul di tengah artikel tidak memunculkan topiknya.
  • Pencocokan bersifat harfiah tanpa toleransi salah ketik maupun padanan kata.
  • Bila tak satu pun topik cocok, daftar tampil kosong tanpa pesan penjelas; penyempurnaannya bisa berupa paragraf “tidak ada topik cocok” yang dikendalikan skrip yang sama.

Batas-batas tersebut wajar untuk lingkup proyek HTML: pola dasar — event input, pembacaan isian, dan penyembunyian butir — tetap sama pada mesin pencari dokumentasi yang jauh lebih canggih.

Pemeriksaan Hasil Tahap Ini #

  1. Buka dokumentasi-pencarian.html di browser, lalu ketik “mem” pada kolom saring; daftar harus menyusut menjadi dua butir.
  2. Kosongkan kolom, lalu amati kelima topik kembali tampil; coba juga kata yang tak ada, misalnya “xyz”.
  3. Tekan tombol Tab dari kolom saring; fokus hanya berpindah pada butir yang sedang tampil.
  4. Jalankan tests/cek-struktur.html, lalu lengkapi butir yang tersisa hingga 10 dari 10.

Sampai di sini proyek Halaman Dokumentasi tuntas: kerangka valid, tiga lapis navigasi, tampilan dua kolom dengan sidebar sticky, dan penyaring topik yang aksesibel. Proyek terakhir Course HTML ini, Landing Page, membalik tujuannya: bukan membantu pengunjung memahami produk, melainkan meyakinkan pengunjung untuk mengambil satu tindakan.

Referensi resmi untuk pendalaman:

Berkas Sumber

Berkas pendukung halaman ini dapat diunduh dan dijalankan langsung sesuai penjelasan di atas.

dokumentasi-pencarian.html

Unduh berkas
html 
<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Dokumentasi CatatKu: panduan penggunaan aplikasi pencatat ringan dari Komunitas Belajar Web.">
  <title>Dokumentasi CatatKu</title>
  <link rel="stylesheet" href="../styles/style.css">
  <script src="pencarian.js" defer></script>
</head>
<body>
  <header>
    <img src="../assets/logo-docs.svg" alt="Logo Dokumentasi CatatKu" width="48" height="48">
    <div>
      <h1>Dokumentasi CatatKu</h1>
      <p>Panduan pengguna aplikasi pencatat ringan</p>
    </div>
  </header>
  <main>
    <nav aria-label="Daftar topik">
      <label for="kolom-cari">Saring topik</label>
      <input type="search" id="kolom-cari" name="kolom-cari" autocomplete="off" placeholder="mis. memulai">
      <ul id="daftar-topik">
        <li><a href="#pengenalan">Pengenalan</a></li>
        <li><a href="#memulai">Memulai</a></li>
        <li><a href="#memformat">Memformat Catatan</a></li>
        <li><a href="#pintasan">Pintasan Keyboard</a></li>
        <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
      </ul>
    </nav>
    <article>
      <nav class="breadcrumb" aria-label="Breadcrumb">
        <ol>
          <li><a href="www.example.com">Beranda</a></li>
          <li aria-current="page">Dokumentasi</li>
        </ol>
      </nav>
      <nav class="toc" aria-label="Di halaman ini">
        <p class="toc-label">Di halaman ini</p>
        <ol>
          <li><a href="#pengenalan">Pengenalan</a></li>
          <li><a href="#memulai">Memulai</a></li>
          <li><a href="#memformat">Memformat Catatan</a></li>
          <li><a href="#pintasan">Pintasan Keyboard</a></li>
          <li><a href="#berbagi">Menyimpan dan Berbagi</a></li>
          <li><a href="#dukungan">Dukungan</a></li>
        </ol>
      </nav>
      <h2 id="pengenalan">Pengenalan</h2>
      <p>CatatKu adalah aplikasi pencatat ringan untuk komputer dan ponsel yang dikembangkan oleh Komunitas Belajar Web. Aplikasi ini menyimpan catatan secara lokal, sehingga tulisan tetap terbaca meski perangkat tidak terhubung ke internet. Halaman dokumentasi ini merangkum topik yang paling sering dicari pengguna baru.</p>
      <h2 id="memulai">Memulai</h2>
      <p>Tiga langkah berikut menyiapkan catatan pertama di CatatKu:</p>
      <ol>
        <li>Unduh CatatKu dari halaman unduhan di situs Komunitas Belajar Web, lalu pasang seperti aplikasi biasa.</li>
        <li>Buka aplikasi, tekan pintasan <kbd>Ctrl</kbd>+<kbd>N</kbd>, atau pilih menu Catatan lalu Catatan Baru.</li>
        <li>Tulis isi catatan; CatatKu menyimpan perubahan secara otomatis setiap beberapa detik.</li>
      </ol>
      <h2 id="memformat">Memformat Catatan</h2>
      <p>CatatKu memakai penanda sederhana untuk memformat teks. Tanda bintang ganda membuat teks tampil tebal, tanda bintang tunggal membuat teks tampil miring, dan tanda pagar di awal baris menjadikan baris tersebut judul bagian.</p>
      <pre><code># Rencana belajar pekan ini
- Menulis ulang catatan *struktur tabel*
- Membaca catatan **pintasan keyboard** dua kali</code></pre>
      <h2 id="pintasan">Pintasan Keyboard</h2>
      <p>Pintasan berikut mempercepat pekerjaan sehari-hari tanpa menyentuh menu:</p>
      <table>
        <caption>Pintasan keyboard pada CatatKu versi desktop</caption>
        <thead>
          <tr>
            <th scope="col">Pintasan</th>
            <th scope="col">Fungsi</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>N</kbd></td>
            <td>Membuat catatan baru</td>
          </tr>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>S</kbd></td>
            <td>Menyimpan salinan catatan aktif</td>
          </tr>
          <tr>
            <td><kbd>Ctrl</kbd>+<kbd>F</kbd></td>
            <td>Mencari teks di dalam catatan terbuka</td>
          </tr>
        </tbody>
      </table>
      <h2 id="berbagi">Menyimpan dan Berbagi</h2>
      <p>Selain menyimpan otomatis, menu Berkas menyediakan opsi Ekspor Catatan. Hasil ekspor berupa berkas teks yang dapat dikirim lewat surel atau dibuka di aplikasi teks apa pun. Untuk berbagi seluruh arsip, menu yang sama menyediakan opsi Cadangkan.</p>
      <h2 id="dukungan">Dukungan</h2>
      <p>Menemui kendala saat memakai CatatKu? Tim dokumentasi memantau surel dukungan pada hari kerja. Sertakan versi aplikasi dan langkah yang memunculkan kendala agar pertanyaan cepat terjawab.</p>
      <address>
        Surel dukungan: <a href="mailto:[email protected]">[email protected]</a>
      </address>
    </article>
  </main>
  <footer>
    <p>Dokumentasi CatatKu — dikelola oleh Komunitas Belajar Web.</p>
  </footer>
</body>
</html>

pencarian.js

Unduh berkas
javascript 
// pencarian.js — penyaring topik sidebar untuk proyek Halaman Dokumentasi.
// Dipakai bersama dokumentasi-pencarian.html pada folder part-4-pencarian-sederhana/.

const kolomCari = document.querySelector("#kolom-cari");
const daftarTopik = document.querySelector("#daftar-topik");
const butirTopik = daftarTopik.querySelectorAll("li");

kolomCari.addEventListener("input", function () {
  const kata = kolomCari.value.trim().toLowerCase();
  butirTopik.forEach(function (butir) {
    const teks = butir.textContent.toLowerCase();
    butir.hidden = kata !== "" && !teks.includes(kata);
  });
});