How MDN's autocomplete search works

Mozilla · 2021 · 1. Khởi đầu · Độ khó: Dễ — bài gốc

Bối cảnh

MDN Web Docs thêm autocomplete để nhảy thẳng tới tài liệu bằng cách gõ một phần tiêu đề. Bản en-US có 11.690 tiêu đề (2021).
Ràng buộc ít ai nghĩ tới: người viết nội dung chạy bản preview tĩnh ở localhost, không có server search, nhưng vẫn cần nhảy nhanh giữa các trang.

Search chạy hoàn toàn ở client: toàn bộ danh sách tiêu đề + URL là một file search-index.json, nén Brotli chỉ còn khoảng 144 KB.
Chỉ tải khi có ý định: mặc định chỉ có một đoạn shim nhỏ bắt onfocus/onmouseover của ô search (hoặc phím /); lúc đó mới tải bundle JS và file index.
Dựng index FlexSearch một lần, dùng lại cho mọi phím gõ; tìm kiếm phản ứng được cả khi user gõ tiếp lúc mạng chưa về. Hiển thị bằng thư viện downshift để đảm bảo accessibility.
Xếp hạng bằng thứ tự mảng: bước build biết pageview của mọi URL nên sắp sẵn file index theo độ phổ biến; FlexSearch lọc, thứ tự tự nhiên của mảng quyết định kết quả nào lên đầu. Theo tác giả, đây cũng là kỹ thuật họ dùng với Elasticsearch cho search toàn văn.
Gõ / ở đầu thì tìm mờ theo đường dẫn (kiểu "go to file" của IDE).

Dữ liệu đủ nhỏ để nạp hết vào bộ nhớ trình duyệt; search ở client chạy được cả trên bản preview tĩnh và không tốn server.

Trước khi dựng hạ tầng search, đo xem dữ liệu có vừa với client không: vài chục nghìn tiêu đề nén còn trăm KB (Hạ tầng tìm kiếm).
Tải lười theo tín hiệu ý định (focus, hover) giữ trang nhẹ cho người không search.
Đẩy xếp hạng vào bước build (sắp sẵn theo độ phổ biến) để phần runtime chỉ còn lọc.
So với GitHub 2023: cùng loại site docs, GitHub phải rời index trong bộ nhớ khi nhân 8 ngôn ngữ × 5 phiên bản và cần search toàn văn.