Cách MDN triển khai tính năng tự động hoàn thành cho tìm kiếm

• Khi người dùng định tìm kiếm gì đó, tải xuống chỉ mục tiêu đề của 11.690 bài viết để thực hiện tìm kiếm cục bộ

→ Tệp JSON 144KB được nén bằng Brotli (title,url)

→ Khi onmouseover, onfocus trên ô tìm kiếm, hoặc khi nhập / ở bất kỳ đâu trên toàn bộ tài liệu, hệ thống nhận diện là bắt đầu tìm kiếm và tải tệp xuống (tệp dữ liệu và tệp hàm tìm kiếm)

• Sau khi tải tệp dữ liệu, xây dựng chỉ mục bằng thư viện FlexSearch và xử lý UI bằng downshift

→ FlexSearch: thư viện tìm kiếm full-text tốc độ cao

→ downshift: thành phần tự động hoàn thành cho React

→ Kết quả nào sẽ được hiển thị trước được sắp xếp theo PV khi máy chủ tạo dữ liệu JSON, và sẽ xuất hiện theo đúng thứ tự đó