Đề bài: Ứng dụng tra cứu nhanh có gợi ý khi gõ

Ngữ cảnh: Ô tìm kiếm thuật ngữ (ví dụ thuật ngữ lập trình web), khi gõ sẽ hiện danh sách gợi ý khớp, chọn 1 gợi ý để xem định nghĩa.

Yêu cầu

1. Có ô nhập từ khóa, khu vực gợi ý hiện ra khi gõ, khu vực hiển thị định nghĩa, nút "Xóa tìm kiếm", nút "Tra cứu ngẫu nhiên".
2. Bổ sung xử lý cho tối thiểu 3 loại sự kiện khác ngoài click: keydown để bắt phím khi gõ và phím mũi tên di chuyển giữa các gợi ý, focus/blur trên ô nhập để hiện/ẩn khu vực gợi ý.
3. Có 1 chức năng chỉ dùng được bằng bàn phím: dùng phím mũi tên xuống/lên để di chuyển giữa các gợi ý đang hiển thị và phím Enter để chọn gợi ý đang được tô sáng, không cần dùng chuột để bấm vào gợi ý.
4. Toàn bộ hàm xử lý phải tách riêng khỏi phần gắn sự kiện, đặt tên hàm rõ nghĩa.
5. Vẽ và nộp kèm sơ đồ event workflow của tối thiểu 2 tương tác trong bài (ví dụ: gõ từ khóa hiện gợi ý và dùng phím mũi tên + Enter để chọn gợi ý). Xem ví dụ sơ đồ trong dapan.html.
6. Giữ nguyên toàn bộ yêu cầu Lần 1: addEventListener cho mọi sự kiện, tối thiểu 5 nút chức năng, 1 phần tử có 2 hàm xử lý cho cùng sự kiện click, bộ đếm thao tác.

Kết quả mong đợi tương tự hình minh họa dưới đây (xem file dapan.html để đối chiếu chi tiết):

Ràng buộc cấu trúc riêng cho mã đề H

Danh sách định nghĩa: Bổ sung một danh sách định nghĩa gồm ít nhất hai cặp thuật ngữ và mô tả. Không thay ràng buộc này bằng cấu trúc của mã đề khác.