Demo frontend

Tìm kiếm tức thời

Gõ vào ô dưới (thử tin, webhook, dang, zns, loi-api để xem trạng thái lỗi) — kết quả trả ra ngay, không cần Enter. Điều hướng bằng ↑ ↓, mở bằng Enter, đóng bằng Esc.

Bàn giao: cần làm gì ở backend

Viết một hàm đúng kiểu InstantSearchFetcher rồi truyền vào <InstantSearchBox fetcher={...} />. Không phải sửa gì trong component.

Hợp đồng dữ liệu: src/components/search/instant/types.ts
Mock để tham chiếu (xoá khi có API thật): src/components/search/instant/mock-fetcher.ts

Frontend đã xử lý sẵn — backend không cần lặp lại

Debounce 180ms — gõ 8 phím chỉ ra 1 request.
Huỷ request cũ qua AbortSignal mỗi lần gõ tiếp.
Chống kết quả về lộn ngược — response của query cũ về sau response mới vẫn bị bỏ.
Chặn query quá ngắn — dưới MIN_SEARCH_QUERY_LENGTH (2) thì không gọi API.
Trạng thái đang tải / rỗng / lỗi, bôi đậm phần khớp (khớp không dấu, bôi đậm đúng chữ có dấu), bàn phím, click ra ngoài để đóng.

Backend cần tôn trọng

Nghe signal và abort thật — nếu không thì request bị bỏ vẫn tốn quota.
Trả về đã xếp hạng sẵn: UI render đúng thứ tự nhận được, không sort lại.
Tự cắt số dòng ở phía server (~5 gợi ý, ~6 trang) — panel là chỗ chọn nhanh, không phải trang kết quả.
total là tuỳ chọn: có thì dòng chân panel hiện “Tất cả N kết quả”, không có thì hiện “Tất cả kết quả”.

Còn để ngỏ

Nguồn của nhóm “Tìm kiếm đề xuất”: query log thật hay danh sách biên tập tay — mock đang dùng danh sách tay.
Có gắn analytics cho lượt chọn trong panel không (hiện chỉ trang /search bắn event).
Có thay ô search ở header/trang chủ bằng component này không, hay chỉ dùng ở trang /search.