Share Tạo chức năng autocomplete với thư viện AutoCompleteJS

[filiallion]

Language

Tiếng Việt

Trước đây tôi có giới thiệu với các bạn xây dựng chức năng autocomplete với thư viện jQuery UI Autocomplete tại bài viết "Tạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete". Bài viết này tôi tiếp tục giới thiệu với các bạn một thư viện khác với chức năng tương tự như jQuery UI Autocomplete đó là AutoCompleteJS.

Không giống như thư viện jQuery UI Autocomplete chỉ là nhắc nội dung khi người dùng nhập vào hộp văn bản mà thư viện AutoCompleteJS còn hỗ trợ kiểu nhập dạng tag và trình đơn để chọn nội dung tương ứng với những gì đã nhập. Điểm đáng chú ý của thư viện AutoCompleteJS đó chính là nó hoạt động rất mượt và gần như nhắc nội dung tức thì, tạo cảm giác rất chuyên nghiệp.

Thư viện AutoCompleteJS không phải là một plugin của jQuery nhưng để hoạt động nó lại cần thư viện jQuery nên khi sử dụng các bạn cần phải lưu ý tích hợp thư viện jQuery vào website.

Các bạn tải thư viện AutoCompleteJS tại địa chỉ http://autocompletejs.com/download (Phiên bản 0.3.0) và tích hợp vào website với nội dung mã lệnh HTML như sau:

<script src="path/to/jquery.min.js"></script>
<script src="path/to/autocomplete-0.3.0.min.js"></script>

Các bạn tạo thành phần để tích hợp chức năng autocomplete như sau:

<div id="autocomplete-js"></div>

Bây giờ, các bạn cài đặt thư viện AutoCompleteJS với nội dung mã lệnh JavaScript như sau:

var autocompleteJs = new AutoComplete('autocomplete-js', ['Apple', 'Banana', 'Orange']);

Các bạn có thể tìm hiểu thêm về thư viện AutoCompleteJS tại địa chỉ http://autocompletejs.com/docs.