Giới thiệu phần tử "datalist" trong HTML5

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

HTML5 đã giới thiệu một số phần tử mới, trong đó có một số control thú vị cho form. Một control rất hữu ích, nhưng ít được biết đến đó là phần tử datalist. Hãy xem nó có thể làm được việc gì cho chúng ta.

Hãy tưởng tượng chúng ta có một form và chúng ta muốn một người dùng nhập vào một chuỗi văn bản, ví dụ như tên của họ. Chúng ta có phần tử <input type="text" />, nó sẽ cho phép người dùng nhập bất cứ điều gì mà anh ta hoặc cô ta thích. Hãy tưởng tượng rằng, sau đó chúng ta muốn người dùng nhập tên nước của họ; chúng ta có thể sử dụng một phần tử <select>. Điều này sẽ giới hạn kết quả nằm trong các tùy chọn có sẵn (đôi khi là một điều tốt) và đồng thời cho người dùng một danh sách rất lớn có khả năng để lựa chọn.

Nhưng nếu chúng ta muốn người dùng được tự do nhập vào những gì họ thích đồng thời đưa ra cho họ một số gợi ý? Đây là lúc phần tử datalist phát huy tác dụng của nó.

Tôi sử dụng nó như thế nào?

Phần tử datalist có chứa các phần tử option giống như phần tử select, dù bản thân datalist không phải là một control độc lập. Thay vào đó nó được thêm vào hoặc gắn vào một phần tử <input type="text" /> thông qua thuộc tính list. Hãy xem các mã đánh dấu sau đây:

  <label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" />
		<option value="Coda" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

Chúng ta có một control <input type="text" /> thông thường với một id và thuộc tính list mới. Điều này nói cho trình duyệt để nó tải danh sách các giá trị hoặc các gợi ý từ phần tử datalist với một id tương ứng.

Sau đó đến phần tử datalist thật sự với id nói trên và một tập hợp các phần tử option Đây là cách mà các giá trị được gắn vào control input.

Khi chúng ta chạy nó trong trình duyệt, chúng ta sẽ thấy một hộp văn bản bình thường, sau đó khi chúng ta bắt đầu gõ (hoặc nhấn phím mũi tên xuống, hoạt động trong Firefox và Chrome nhưng không hoạt động trong Opera) thì danh sách hoàn chỉnh hoặc danh sách lọc xuất hiện. Khi chúng ta gõ, chỉ có các tùy chọn có liên quan sẽ hiển thị, giống như cách hộp tìm kiếm của Google hiển thị các gợi ý. Tuy nhiên hãy lưu ý, hành vi hơi khác nhau ở trên các trình duyệt khác nhau.

Theo trang web chính thức của W3C, datalist có thể được dùng với:

<input type="text" />
<input type="url" />
<input type="tel" />
<input type="color" />
Data và Time (bao gồm tháng vv.), khoảng giá trị và vân vân.

Các thuộc tính khác

Chúng ta có thể nâng cao các tùy chọn thêm một bước nữa bằng cách thêm một thuộc tính label, như trong một số phần tử dưới đây:

	<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" label="by Adobe" />
		<option value="Coda" label="by Panic" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" label="the developer's choice" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

Chính xác cách mà các label này được hiển thị và xử lý phụ thuộc vào trình duyệt - hãy xem phần quirks ở phía dưới để xem như thế nào.

Tôi có thể sử dụng nó ngay bây giờ chứ?

Trình duyệt hỗ trợ cho datalist vẫn còn hạn hẹp cho đến lúc này. Bây giờ IE 10+, Firefox 4+, Chrome và Opera hỗ trợ nó (không có Safari như đã nêu). Nó cũng được hỗ trợ bởi Opera Mobile và Firefox cho Android. Hãy xem ảnh chụp màn hình này chỉ ra trạng thái hiện tại như được liệt kê bởi caniuse.com:

Các trình duyệt cũ hơn sẽ tự động bỏ qua phần tử datalist.

Hỗ trợ tổng thể được đề cập là 48.36%. Điều đó không tốt lắm, nhưng tin vui là trình duyệt cũ hơn sẽ tự động bỏ qua phần tử datalist, điều đó không làm ảnh hưởng nhiều đến trải nghiệm của chúng ta. Thực tế này đúng cho tất cả các form control mới trong HTML5. Nếu việc hỗ trợ cho trình duyệt cũ hơn là cần thiết, thì jQuery Autocomplete có thể được sử dụng như một phương án dự phòng.

Quirks

Vì trình duyệt chỉ mới hỗ trợ rộng hơn gần đây, nên có những phỏng đoán trước bởi các nhà cung cấp. Firefox và Chrome sử dụng theme của hệ điều hành để định phong cách các tùy chọn danh sách, trong khi Opera sẽ kế thừa các phong cách nhất định (màu sắc, phông chữ) từ các input. Ngoài ra, đừng quên định phong cách phần tử datalist với CSS.

Hành vi cũng khác nhau về cách các giá trị được lọc. Mỗi trình duyệt xử lý danh sách khác nhau khi các thuộc tính label và value của phần tử option được sử dụng.

Ví dụ, Opera sẽ lọc trên cơ sở value và label. "by A" và "Brac" cả hai sẽ trả về "Brackets" trong trường hợp của chúng ta.

Tuy nhiên, Chrome sẽ bỏ qua label. Ví dụ "by A" sẽ không trả về bất kỳ kết quả nào, trong khi "Brac" sẽ có kết quả.

Firefox chỉ hiển thị label nếu nó được định nghĩa. "by A" sẽ trả về "by Adobe", nhưng "Brackets" không còn tồn tại nữa!

Kết luận

Có rất nhiều thứ cần phải cải thiện nơi việc cài đặt là có vấn đề, nhưng nhìn chung đây là một sự bổ sung tuyệt vời vào thế giới web. Tôi hy vọng điều này đã làm bạn thấy hứng thú!

Tham khảo thêm

Polyfill cho Datalist bởi Chris Coyier
Đặc tả kỹ thuật trên W3C
Trình duyệt hỗ trợ trên caniuse.com