Sử dụng gem jquery-atwho-rails để làm chức năng tag tên người dùng

1.Giới thiệu

Trong bài viết này tôi xin giới thiệu cách làm chức năng tag tên người dùng khi đăng bài hoặc khi comment giống như trên facebook với phím tắt @. Để có thể làm được việc này tôi dùng gem jquery-atwho-rails. Bài viết chỉ hướng dẫn tag duy nhất phần tên của người dùng, và cũng chỉ có phần tên của người (dạng text) dùng hiện ra khi được tag.

2.Cài đặt gem

Thêm vào Gemfile

gem "jquery-atwho-rails"

và chạy bundle

thêm vào file app/assets/javascripts/application.js:

//= require jquery
//= require jquery.atwho

thêm vào file app/assets/stylesheets/applications.css:

//=require jquery.atwho

3.Sử dụng

Để sử dụng ta cần thêm 1 đoạn ajax vào view mà ta muốn thực hiện tag

<script>
  data = <%= raw User.pluck(:name).compact.to_json %>;
  $('textarea').atwho({at:"@", 'data':data});
</script>

Phần data có thể thay đổi tùy theo ý muốn. Ở đây là chỉ riêng phần tên của tất các các người dùng trong hệ thống. Ta có thể thêm các ràng buộc khác ví dụ như ko phải tất các các người dùng trong hệ thống mà chỉ là bạn bè của mình.

Để có thể tag tên người dùng, trong phần nhập text ta bắt đầu bằng ký tự @ và các chữ cái tiếp theo của tên người dùng mà mình muốn tag, hệ thống sẽ tự gợi ý những người dùng có trong data đã khai báo ở trên mà có tên có những chứ cái đó. Sau đó bạn chỉ việc di chuột chọn người dùng mà mình muốn tag.

4.Hình ảnh minh họa

5.