Tự động hoàn thành bằng JavaScript

Bây giờ chúng ta sẽ triển khai tính năng tự động hoàn thành. Thuật ngữ này đề cập đến gợi ý hiện ra khi nhập văn bản vào ô input. Hãy xem một ví dụ. Bên dưới tôi đã tạo một ô input, vào đó bạn có thể nhập tên một quốc gia. Đồng thời, nếu nhập một số chữ cái, bên dưới ô input sẽ xuất hiện danh sách các quốc gia bắt đầu bằng chuỗi đã nhập.

Nếu muốn, để không phải nhập toàn bộ tên quốc gia, bạn có thể click chuột vào bất kỳ quốc gia nào và nó sẽ xuất hiện trong ô input. Nói chung, đây là mục đích của tính năng tự động hoàn thành. Trong ví dụ, để đơn giản tôi chỉ liệt kê ba quốc gia: Belarus, Belgium và Bulgaria. Hãy nhập vào ô input bên dưới đầu tiên ký tự 'B' (tiếng Anh), sau đó là 'e' và xem điều gì sẽ xảy ra:

Thảo luận

Hãy thảo luận cách giải quyết bài toán. Cần tạo một mảng chứa tên các quốc gia. Của tôi như sau:

let arr = ['Belarus', 'Belgium', 'Bulgaria'];

Khi nhập văn bản vào ô input, với mỗi ký tự được nhập cần duyệt qua mảng các quốc gia và lấy ra các quốc gia bắt đầu bằng chuỗi đã nhập. Điều này có thể thực hiện thuận tiện bằng các phương thức filter và startsWith.

Với filter, bạn có thể lấy được mảng các quốc gia bắt đầu bằng chuỗi đã nhập. Sau đó cần duyệt qua mảng này bằng vòng lặp và điền vào danh sách ul các mục li chứa tên quốc gia. Và cần làm như vậy với mỗi ký tự được nhập, đồng thời xóa trước các mục li đã tạo trước đó trong danh sách.

Để thuận tiện cho bạn, tôi cung cấp sẵn mã đánh dấu:

<div id="parent">
	<input id="elem">
	<ul id="list"></ul>
</div>
text text text text text

#parent {
	position: relative;
}
#elem {
	padding: 5px;
	font-size: 18px;
}

#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}
#parent li {
	border: 1px solid gray;
	font-size: 18px;
	padding: 5px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

Hãy sao chép mã HTML và CSS được cung cấp. Triển khai tính năng tự động hoàn thành theo thuật toán đã mô tả.