Tìm hiểu cơ bản về DataList trong HTML5

Html & Javascript 10-3-2015

Mỗi khi bạn nhấp vào ô tìm kiếm trong trang google, thường xuất hiện những lựa chọn gợi ý có sẵn cho bạn lựa chọn bên dưới. Đây là một tính năng mới và rất hay của HTML5 , mình sẽ giúp các bạn áp dụng tính năng tương tự cho trang web của mình.

datalist, html5, data html5, tag, tag datalist

Trước đây, để tạo tính năng này, chúng ta thường phải sử dụng Javacript, nhưng trong bài viết này, các bạn sẽ làm tính năng này với phần tử HTML5 <datalist>. Phần tử này sẽ giúp chúng ta lưu trữ danh sách các lựa chọn sẽ được hiển thị khi người dùng nhập bất kì một từ nào.

Chúng ta sẽ liên kết <datalist> với các phần tử <input> thông qua một thuộc tính mới của HTML5 là list. Chúng ta sẽ sử dụng list nằm bên trong khai báo các thẻ <input>.
Để dễ hiểu, chúng ta sẽ xem xét ví dụ sau. Trước tiên chúng ta sẽ tạo ra danh sách các lựa chọn sẽ hiển thị :

&lt;datalist id=&quot;city&quot;&gt;

    &lt;option value=&quot;Adelaide&quot;&gt;

    &lt;option value=&quot;Bandung&quot;&gt;

    &lt;option value=&quot;Bangkok&quot;&gt;

    &lt;option value=&quot;Beijing&quot;&gt;

    &lt;option value=&quot;Hanoi&quot;&gt;

    &lt;option value=&quot;Ho Chi Minh City&quot;&gt;

    &lt;option value=&quot;Hong Kong&quot;&gt;

    &lt;option value=&quot;Jakarta&quot;&gt;

    &lt;option value=&quot;Kuala Lumpur&quot;&gt;

    &lt;option value=&quot;Osaka&quot;&gt;

    &lt;option value=&quot;Seoul&quot;&gt;

    &lt;option value=&quot;Shanghai&quot;&gt;

    &lt;option value=&quot;Singapore&quot;&gt;

    &lt;option value=&quot;Surabaya&quot;&gt;

    &lt;option value=&quot;Sydney&quot;&gt;

    &lt;option value=&quot;Tokyo&quot;&gt;

&lt;/datalist&gt;

Để liên kết <datalist> với thẻ <input>, chúng ta chỉ cần đặt thuộc tính list vào bên trong thẻ <input> như sau :

&lt;input class=&quot;destination-list&quot; type=&quot;text&quot; placeholder=&quot;From:&quot; list=&quot;city&quot;&gt;

&lt;input class=&quot;destination-list&quot; type=&quot;text&quot; placeholder=&quot;To:&quot; list=&quot;city&quot;&gt;

“city” chính là id của <datalist> mà ta đã khai báo ở bên trên.

SỰ TƯƠNG THÍCH GIỮA CÁC TRÌNH DUYỆT

Đối với Chrome:

Danh sách hiển thị sẽ được lọc với những kết quả bắt đầu với giá trị mà chúng ta nhập vào. Ở ví dụ bên dưới. Chrome sẽ hiển thị những giá trị bắt đầu bằng chứ “s“.

datalist, html5, data html5, tag, tag datalist