Cara MDN Mengimplementasikan Autocomplete Pencarian

• Saat pengguna hendak mencari sesuatu, indeks berisi 11.690 judul artikel diunduh lalu pencarian dilakukan secara lokal

→ File JSON 144KB yang dikompresi dengan Brotli (title,url)

→ Saat onmouseover, onfocus pada kotak pencarian, atau ketika / ditekan di seluruh dokumen, itu dikenali sebagai awal pencarian sehingga file diunduh (file data dan file fungsi pencarian)

• Setelah file data diunduh, indeks dibangun dengan library FlexSearch dan UI ditangani dengan downshift

→ FlexSearch: library pencarian full-text yang cepat

→ downshift: komponen autocomplete untuk React

→ Hasil yang ditampilkan lebih dulu ditentukan dengan mengurutkan data JSON di server berdasarkan PV, lalu ditampilkan mengikuti urutan tersebut