Flexdirthist - Plugin tự động hoàn thành với Hỗ trợ

Các HTML5 thành phần là khá hữu ích trong phát triển frontend hiện đại. Tuy nhiên, đó là một trong những yếu tố mà không nhiều nhà phát triển biết đến.

Nó hoạt động trên một trường đầu vào nơi bạn có thể tự động đề xuất các giá trị nhất định cho đầu vào. Thiết lập mặc định có vẻ ổn và chúng tôi đã đề cập đến một số mẹo mã hóa để xây dựng các hiệu ứng tuyệt vời với các trình dữ liệu tự động đề xuất.

Tuy nhiên, nó dễ dàng hơn nhiều để làm việc với một plugin nhu la Bác sĩ phẫu thuật. Nó hỗ trợ một loạt các trình duyệt và cho phép bạn tùy chỉnh đầy đủ thiết kế của datalist của bạn.

Không phải ai cũng có nhu cầu về các tính năng tự động hoàn thành và với các trình dữ liệu HTML5 gốc, bạn có thể không bận tâm với một plugin. Tuy nhiên, Flexdirthist có lẽ là người giỏi nhất vì nó xây dựng dựa trên các hành vi dữ liệu bản địa thêm:

• Hỗ trợ đáp ứng di động
• Mô tả thêm cho mỗi mục
• Tùy chọn cho nhiều lựa chọn cùng một lúc
• Xử lý sự kiện tùy chỉnh

nó là tất cả được cung cấp bởi jQuery, vậy bạn sẽ cần một bản sao của phiên bản mới nhất để có được điều này chạy. Nó cũng đi kèm với biểu định kiểu CSS của riêng nó mà bạn có thể muốn kết hợp thành một tệp CSS để giảm yêu cầu HTTP.

Bạn có thể tìm hướng dẫn thiết lập đầy đủ trên trang demo chính bao gồm tải về các liên kết đến các tập tin Flexdirthist.

Nó thực sự đơn giản để thiết lập, với chỉ một dòng JavaScript. Theo mặc định, plugin nhắm mục tiêu tất cả các đầu vào với lớp .bác sĩ phẫu thuật, vì vậy chỉ cần thêm nó vào mã của bạn là đủ để thấy kết quả.

Bạn chỉ cần thêm phần tử bên trong trường đầu vào của bạn và Flexdirthist xử lý phần còn lại. Nó sẽ tự động tạo kiểu cho danh sách, bao gồm văn bản mô tả tùy chọn.

Cách đơn giản nhất để thêm văn bản bổ sung là thông qua tệp JSON mà bạn có thể đính kèm với đầu vào của bạn thông qua một thuộc tính dữ liệu.

Ví dụ: nếu bạn xem trang demo của Flexdbornist, bạn sẽ tìm thấy “Các nước” trường đầu vào với thuộc tính data-data = 'country.json'. Cái này tham chiếu một tập tin từ xa lưu trữ tất cả dữ liệu đầu vào bên ngoài.

Quá nhiều lĩnh vực bạn có thể làm chậm trang một chút. Tuy nhiên, tôi không thể tưởng tượng nhiều trang web sẽ chạy nhiều hơn một vài trong số các biểu mẫu dữ liệu này trên một trang, chưa kể đến với plugin jQuery này, chúng vẫn còn khá nhanh.

Để bắt đầu, chỉ cần truy cập repo GitHub và tải xuống một bản sao. Điều này bao gồm một liên kết đến trang demo chính trong đó cũng có tài liệu đầy đủ để thiết lập, tùy chọn JavaScript và nhiều đoạn mã mẫu đi xung quanh.