Thẻ datalist

Thẻ datalist tạo tính năng tự động hoàn thành cho các trường nhập liệu input trong biểu mẫu HTML.

Bản chất của tự động hoàn thành: khi người dùng cố gắng gõ nội dung vào trường nhập liệu, bên dưới sẽ xuất hiện một gợi ý bật lên, có dạng một danh sách các lựa chọn có sẵn. Người dùng có thể chọn một trong các tùy chọn được đề xuất mà không cần nhập đầy đủ nội dung.

Để liên kết tính năng tự động hoàn thành với thẻ input, cần đặt cho nó thuộc tính list, trong đó chỉ định thuộc tính id của thẻ datalist được liên kết.

Các tùy chọn lựa chọn được lưu trữ trong các thẻ option, thứ lần lượt được lưu trữ trong thẻ datalist.

Ví dụ

Hãy nhập tên một quốc gia vào trường nhập liệu. Trước tiên hãy nhập chữ cái 'b' - và bạn sẽ thấy một gợi ý bật lên gồm ba quốc gia. Sau đó nhập thêm chữ cái 'e' - số lượng quốc gia được đề xuất sẽ giảm xuống còn hai:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Ví dụ

Bây giờ hãy thêm vào thẻ option thuộc tính value. Khi chọn một quốc gia cụ thể, nội dung được đưa vào trường input được liên kết sẽ không phải là tên quốc gia, mà là nội dung của thuộc tính value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

Ví dụ . Ảnh hưởng của thuộc tính autocomplete

Danh sách gợi ý xổ xuống chịu ảnh hưởng của thuộc tính autocomplete. Nếu nó được bật (và điều này là mặc định), thì vào các giá trị mà bạn đặt trong thẻ datalist, sẽ được trộn thêm các giá trị mà người dùng đã nhập vào trường này trước đó.

Hãy nhập vào trường 'Brazil' và nhấn nút gửi (nếu không gửi, trình duyệt sẽ không ghi nhớ quốc gia này). Sau đó quay lại ví dụ này và nhập chữ cái 'b' - trong danh sách xuất hiện bạn sẽ thấy không chỉ 3 quốc gia từ datalist, mà còn có quốc gia đã nhập trước đó (ngoài ra, nếu bạn làm tương tự với từ 'Belarus' - trong danh sách xổ xuống giá trị này sẽ xuất hiện hai lần).

Nếu điều này gây cản trở cho bạn - hãy tắt thuộc tính autocomplete, bằng cách thêm cho nó giá trị off.

Hãy thực hiện các thao tác được mô tả ở trên với ví dụ:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

Xem thêm

thuộc tính autocomplete,
thiết lập tính năng tự động hoàn thành cho các trường biểu mẫu