Làm thế nào để tạo một Datalist Đó là có thể tìm kiếm ngay lập tức

Danh sách thả xuống là một cách gọn gàng cho cung cấp tùy chọn đối với trường đầu vào, đặc biệt khi danh sách các tùy chọn khả dụng dài. Người dùng có thể chọn tùy chọn họ muốn gõ vào trường, hoặc là xem qua các tùy chọn đó có thể là một trận đấu cho những gì họ đang tìm kiếm. Có thể tìm kiếm thông qua các tùy chọn, tuy nhiên, là giải pháp lý tưởng.

Hành vi này có thể đạt được với Phần tử HTML hiển thị đề xuất đầu vào cho các điều khiển khác nhau, chẳng hạn như nhãn. Tuy nhiên chỉ hiển thị các tùy chọn khả dụng khi người dùng có đã gõ một cái gì đó vào trường đầu vào.

Chúng tôi có thể làm cho một trường đầu vào có thể sử dụng nhiều hơn nếu chúng tôi cho phép người dùng truy cập danh sách đầy đủ các tùy chọn bất cứ lúc nào trong quá trình lấy đầu vào.

Trong bài đăng này, chúng ta sẽ xem cách tạo một danh sách thả xuống có thể tìm kiếm bất cứ lúc nào sử dụng nhãn giống như các ID của thẻ - đây là cách chúng tôi liên kết chúng với nhau.

2. Hiển thị dữ liệu

Theo mặc định, Phần tử HTML là ẩn. Chúng ta chỉ có thể nhìn thấy nó, khi chúng ta bắt đầu nhập một đầu vào vào trường dữ liệu được gắn vào.

Tuy nhiên, có một cách để "ép buộc" nội dung của nhà dữ liệu (tức là tất cả các tùy chọn của nó) xuất hiện trên trang web. Chúng ta chỉ cần cho nó một sự phù hợp trưng bày giá trị tài sản khác hơn không ai, ví dụ hiển thị: khối;.

 datalist display: block;

Các tùy chọn hiển thị chưa thể lựa chọn tại thời điểm này, trình duyệt chỉ làm cho các tùy chọn nó tìm thấy bên trong datalist.

Như đã nói ở trên, do hành vi tích hợp của thành phần, một phần của các tùy chọn đã xuất hiện và có thể lựa chọn, nhưng chỉ khi người dùng bắt đầu nhập một chuỗi mà trình duyệt có thể tìm một lựa chọn phù hợp.

Chúng ta cũng cần tìm một cơ chế để thực hiện tất cả các tùy chọn (trên ảnh chụp màn hình ở trên được hiển thị dưới bảng dữ liệu thả xuống) có thể lựa chọn tại bất kỳ điểm nào khác của quá trình lấy đầu vào - khi người dùng muốn kiểm tra các tùy chọn trước khi họ nhập bất cứ thứ gì hoặc trong khi họ đã đưa thứ gì đó vào trường đầu vào.

3. Mang vào Phần tử HTML.

Chúng tôi sẽ chọn phương pháp thứ hai, vì nó đơn giản hơn và được phép sử dụng như một cơ chế dự phòng trong các trình duyệt không hỗ trợ thành phần. Khi một trình duyệt không thể kết xuất và hiển thị bảng dữ liệu, nó sẽ làm cho Thẻ HTML, mã trông như dưới đây:

Datalist kết hợp với Thêm nhiều thuộc tính để người dùng chọn một tùy chọn từ danh sách thả xuống, giá trị của nó sẽ được hiển thị bên trong lĩnh vực là tốt. / * khi người dùng chọn một tùy chọn từ DDL, hãy viết nó vào trường văn bản * / select.addEventListener ('thay đổi', fill_input); hàm fill_input () input.value = tùy chọn [this.selected Index] .value; ẩn_select (); Hạn chế Hạn chế chính của kỹ thuật này là không có cách trực tiếp để tạo kiểu thành phần với CSS (sự xuất hiện của và