Trình đơn thả xuống tự động hoàn thành HTML5

Đôi khi bạn muốn đề xuất một số tùy chọn cho người dùng khi họ nhập nội dung nào đó vào đầu vào. Có thể có những danh mục hoặc thẻ tìm kiếm phổ biến mà mọi người đang tìm kiếm. Tất nhiên, bạn có thể triển khai một tính năng dựa trên API hoặc nếu bạn muốn nhanh chóng thiết lập và chạy tính năng này, tại sao không chỉ sử dụng thẻ datalist?

Trong trường hợp bạn muốn xem tôi loay hoay với thẻ datalist, bạn có thể xem tại đây hoặc tiếp tục cuộn để đọc

Video hiển thị datalist đang hoạt động

Phần tử HTML







1 chứa một tập hợp các phần tử






2 đại diện cho các tùy chọn được phép hoặc khuyến nghị có sẵn để chọn trong các điều khiển khác. — MDN

Datalist hoạt động như một kết hợp giữa đầu vào thông thường và trường chọn trong đó nó cho phép người dùng chọn một tùy chọn được đề xuất, xem các đề xuất khi bạn nhập hoặc thêm vào tùy chọn của riêng bạn

Vì vậy, làm thế nào nó hoạt động?

Hãy chỉ cho bạn cách thêm thẻ datalist vào một thẻ







4 cũ thông thường như một ví dụ đơn giản (và có lẽ là thẻ phổ biến nhất mà bạn sẽ sử dụng)

datalist sẽ hoạt động gần như giống với thẻ







6 lấy bên trong






0







Điều quan trọng mà bạn sẽ thấy ở đây là







1 của chúng tôi lấy một






2 làm tùy chọn hướng đến






3 của datalist mà bạn muốn sử dụng để điền dữ liệu vào

Nhìn vào datalist trong hành động

Bạn cũng có thể thêm vào một số ghi chú bên trong để trong ví dụ này, bạn sẽ thấy nếu ai đó bắt đầu nhập “Html” làm ngôn ngữ lập trình yêu thích của họ, chúng tôi có thể hiển thị một ghi chú nhỏ yêu cầu họ ngừng troll chúng tôi…

Một điều thực sự thú vị khác về datalist là nó không chỉ dành cho các đầu vào có kiểu







6. Bạn có thể sử dụng nó để thêm một số gợi ý cho hầu hết các thẻ bao gồm cả thẻ






7 và






8

Đây là một ví dụ về nó được sử dụng với bộ chọn màu







Nhìn vào một datalist đang được sử dụng cho đầu vào bằng cách sử dụng một loại màu

Tôi rất thích học bằng cách hack, vì vậy hãy truy cập ngay vào CodePen này để tự mình trải nghiệm

Ví dụ về các thẻ datalist đang hoạt động

Khi nào thì sử dụng cái này?

Thẻ HTML5 nào được sử dụng để cung cấp tính năng thả xuống tự động hoàn thành gốc trong biểu mẫu HTML?

Thẻ được sử dụng để cung cấp tính năng "tự động điền" cho các phần tử

Làm cách nào để tự động hoàn thành trong HTML?

Thuộc tính tự động hoàn thành chỉ định liệu trường nhập liệu có được bật tự động hoàn thành hay không . Tự động điền cho phép trình duyệt dự đoán giá trị. Khi người dùng bắt đầu nhập vào một trường, trình duyệt sẽ hiển thị các tùy chọn để điền vào trường, dựa trên các giá trị đã nhập trước đó.

Tự động hoàn thành khác với datalist như thế nào?

Các loại đầu vào khác . Xem xét loại đầu vào phạm vi, cho phép tạo thành phần dạng thanh trượt. autocompletion is traditionally associated with textual input, datalists can also be used on a number of the new HTML5 input types. Consider the range input type, which allows for the creation of a slider form element.

Làm cách nào để tạo danh sách thả xuống tự động hoàn thành trong JavaScript?

Cách tạo danh sách thả xuống Tự động điền JavaScript .
Trước hết, tạo một phần tử div với tên lớp là “search-container” và đặt một phần tử đầu vào cho hộp tìm kiếm. .
Sau khi tạo HTML, chúng ta cần tạo kiểu cho hộp nhập liệu và danh sách thả xuống đề xuất