Share Tạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete

filiallion · 04/17/2018

Hàng ngày, các bạn thường sử dụng Google để tìm kiếm thông tin, và khi các bạn gõ bất kì từ khóa nào thì Google sẽ tự động liệt kê danh sách những cụm từ có nghĩa tương đồng với từ khóa đó ở bên dưới để gợi ý cho các bạn. Điều này sẽ giúp các bạn rút ngắn thời gian gõ toàn bộ từ khoá, đồng thời cũng giúp các bạn nhập vào chính xác từ khóa cần tìm hơn. Đây là một chức năng hay mà các website thường sử dụng và để thực hiện được chức năng này tôi giới thiệu với các bạn thư viện jQuery UI Autocomplete trong bộ thư viện jQuery UI.

Để sử dụng thư viện jQuery UI các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download. Ngoài ra, trong gói thư viện jQuery UI cũng đã có sẵn thư viện jQuery để các bạn tích hợp.

Các bạn tải gói thư viện jQuery UI tại địa chỉ http://jqueryui.com/download. Tại trang tải thư viện, các bạn có thể chọn các thành phần mà các bạn cần dùng cũng như chọn mẫu giao diện các bạn muốn sử dụng, với bài viết này thì tôi chỉ sử dụng duy nhất thành phần Autocomplete.

Các bạn tích hợp thư viện jQuery UI vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/jquery-ui.min.css" rel="stylesheet">
<script src="path/to/jquery-ui.min.js"></script>

Và cài đặt thư viện jQuery UI Autocomplete với nội dung mã lệnh như sau:

JavaScript:

$(function() {
    $('#autocomplete').autocomplete({
        source: ['One', 'Two', 'Three']
    });
});

Sau đó để áp dụng tự động hoàn tất nhập liệu với trường nào đó các bạn tham khảo ví dụ sau:

HTML:

<input type="text" name="autocomplete" id="autocomplete">

Các bạn có thể tìm hiểu thêm về thư viện jQuery UI Autocomplete tại địa chỉ http://jqueryui.com/autocomplete.

Share Tạo chức năng tự động hoàn tất nhập liệu với thư viện jQuery UI Autocomplete

filiallion

Administrator