Latihan 1 dari materi Active Search di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya <input type="search" name="q"> dengan hx-get="/api/search" dan hx-target="#results", plus <span id="search-spinner" class="htmx-indicator">Mencari...</span> dan <div id="results">. Biarkan semuanya, lalu di <input> yang sama:
hx-trigger="keyup changed delay:300ms". Request dikirim 300 ms sesudah ketikan terakhir, dan cuma kalau nilainya berubah.hx-indicator="#search-spinner", supaya Mencari... muncul selama request berjalan.Yang dicek:
<input> punya hx-trigger, dan nilainya gak kosong.hx-get di <input> tetap persis /api/search, dan hx-target-nya tetap persis #results.hx-indicator di <input> bernilai persis #search-spinner.hx-trigger, delay:300ms, dan hx-indicator di luar komentar (komentar TODO gak dihitung).Di pratinjau, htmx berjalan: 300 ms sesudah kamu berhenti mengetik, GET /api/search?q=... dikirim dan dijawab 404 karena belum ada contoh balasan, jadi #results tetap kosong. Mau melihat hasilnya? Tambahkan <template id="contoh-balasan"><p>#12 Pak Darto, 3 kg</p></template> di bawah kodenya. Template itu gak dinilai.
