danh sách dữ liệu đã được thêm vào Chrome Canary

Đôi khi, việc điền vào biểu mẫu có vẻ như cồng kềnh. Cung cấp cho người dùng nhiều lựa chọn nhưng việc cho phép họ nhập thoải mái là điều quan trọng. Phần tử datalist (vừa ra mắt trên Chrome Canary (M20) giúp việc này trở nên dễ dàng hơn.

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. Họ có thể chọn một mục trong danh sách hoặc nhập văn bản dạng tự do.

Bản minh hoạ trực tiếp:

Bạn có thể ghép nối các tuỳ chọn với datalist bằng cách chỉ định id của đối tượng này 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 phải lo lắng quá nhiều về khả năng tương thích. Tuy nhiên, nếu bạn 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, thì mọi nội dung trong datalist, ngoại trừ các phần tử option đều 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" làm tham số truy vấn.