Đôi khi, việc điền vào biểu mẫu có vẻ như là một việc rườm rà. Điều quan trọng là bạn phải cho phép người dùng có nhiều lựa chọn nhưng vẫn có thể nhập tự do. Phần tử datalist (mới xuất hiện trên Chrome Canary (M20)) giúp bạn thực hiện việc này một cách dễ dàng.
Bằng cách sử dụng datalist, ứng dụng của bạn có thể xác định danh sách kết quả đề xuất mà người dùng nên chọn. Người dùng có thể chọn một mục trong danh sách hoặc nhập văn bản tự do.
Bạn có thể ghép nối các tuỳ chọn với datalist bằng cách chỉ định id trong thuộc tính list của phần tử input:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist được cung cấp rộng rãi trên Firefox, Opera và Internet Explorer mới nhất sau phiên bản 10. Vì vậy, bạn không cần phải lo lắng quá nhiều về khả năng tương thích, nhưng nếu muốn đảm bảo tính năng này hoạt động trên nhiều trình duyệt, hãy thử những cách sau:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Nếu datalist có trên trình duyệt của bạn, mọi thứ trong datalist ngoại trừ các phần tử option sẽ bị ẩn. Nếu bạn sử dụng cơ chế dự phòng này, hãy đảm bảo máy chủ của bạn nhận được cả “fruit_sel” và “fruit” dưới dạng tham số truy vấn.