Pilihan cari

Kotak pilihan dengan pencarian — dipakai untuk memilih kelas dan lembaga saat jumlahnya banyak. Murni HTML + JS, tanpa pustaka.

Pilih kelas

Ketik untuk menyaring. Daftar muncul saat fokus, menutup saat Esc atau klik di luar.

Kelas

Kosongkan untuk melihat semua kelas.

Lihat kode

<div class="ck-field" style="max-width:24rem">
  <label class="ck-label" for="cb-kelas">Kelas</label>
  <div class="ck-combobox" data-ck-combobox>
    <input class="ck-input" id="cb-kelas" placeholder="Cari kelas…" aria-expanded="false" aria-autocomplete="list" role="combobox">
    <div class="ck-combobox__list" hidden>
      <div class="ck-combobox__opt" role="option">X IPA 1</div>
      <div class="ck-combobox__opt" role="option">X IPA 2</div>
      <div class="ck-combobox__opt" role="option">XI IPS 3</div>
      <div class="ck-combobox__opt" role="option">XII Bahasa 1</div>
      <div class="ck-combobox__opt ck-combobox__opt--empty" hidden>Tidak ada kelas yang cocok</div>
    </div>
  </div>
  <span class="ck-hint">Kosongkan untuk melihat semua kelas.</span>
</div>