Share Tạo chức năng autocomplete tương tự như Facebook với thư viện At.js

filiallion · 06/11/2019

Khi các bạn sử dụng Facebook mà muốn thêm tên của một người bạn nào đó vào nội dung timelime đang viết thì các bạn có thể gõ vài ký tự trong tên người bạn đó, Facebook sẽ gợi ý cho các bạn. Hay trên một số ứng dụng các bạn hay sử dụng ký tự @ để bắt đầu thêm tên của ai đó thì ứng dụng cũng sẽ gợi ý cho các bạn những người mà các bạn đang quan tâm. Với thư viện At.js các bạn cũng có thể tạo ra chức năng tương tự như vậy chỉ với vài dòng mã lệnh JavaScript đơn giản.

Thư viện At.js được viết dựa trên nền tảng jQuery nên các bạn cần tích hợp thư viện jQuery vào website trước khi tích hợp At.js. Ngoài ra, các bạn cũng cần phải tích hợp plugin jQuery Caret, các bạn có thể tải tại địa chỉ https://github.com/acdvorak/jquery.caret (Bài viết này tôi sử dụng phiên bản 1.5.2). Sau đó, các bạn có thể truy cập địa chỉ https://github.com/ichord/At.js để tải về thư viện At.js và tích hợp vào website với nội dung như sau:

HTML:

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

Các bạn tạo một textarea để nhập văn bản như sau:

HTML:

<textarea id="at-js"></textarea>

Và cài đặt autocomplete với thư viện At.js như sau:

JavaScript:

$(function() {
    $('#at-js').atwho({
        at: '@',
        data: ['Peter', 'Tom', 'Anne']
    });
});

Các bạn có thể xem demo tại địa chỉ http://ichord.github.io/At.js.

Share Tạo chức năng autocomplete tương tự như Facebook với thư viện At.js

filiallion

Administrator