Trong các ứng dụng web hiện đại, việc cải thiện trải nghiệm người dùng là điều không thể thiếu. Đối với các dropdown list dài hoặc cần chức năng tìm kiếm, thư viện Select2 là một giải pháp tuyệt vời. Trong bài viết này, chúng ta sẽ tìm hiểu cách tích hợp Select2 vào ứng dụng Rails một cách dễ dàng và hiệu quả
1. Select2 là gì?
Select2 là một plugin JavaScript giúp mở rộng chức năng của thẻ <select>, bao gồm:
- Tìm kiếm trong dropdown
- Hỗ trợ chọn nhiều mục
- Giao diện đẹp và dễ tùy chỉnh
- AJAX load dữ liệu động
2. Cài đặt Select2 vào Rails
2.1 Thêm thư viện vào ứng dụng
Bạn có thể sử dụng CDN hoặc import qua Webpacker (với Rails 6+) hoặc esbuild (Rails 7)
Với CDN:
Trong file app/views/layouts/application.html.erb, thêm:
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" %>
<%= javascript_include_tag "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" %>
Với importmap (Rails 7+ dùng importmap-rails):
Thêm vào config/importmap.rb:
pin "select2", to: "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
Rồi trong JavaScript:
import "select2";
3. Áp dụng Select2 vào Form
Ví dụ Form đơn giản:
<%= form_with model: @user do |f| %> <div class="field"> <%= f.label :country %> <%= f.select :country_id, Country.all.collect { |c| [c.name, c.id] }, {}, class: "select2" %> </div>
<% end %>
Kích hoạt Select2
Trong app/javascript/application.js hoặc file JavaScript chính
document.addEventListener("turbo:load", function () { $('.select2').select2();
});
Lưu ý: Nếu bạn dùng Turbo, cần dùng sự kiện "turbo:load" thay vì "DOMContentLoaded" để đảm bảo chạy lại khi chuyển trang.
4. Nâng cấp với AJAX (tải dữ liệu động)
Khi danh sách quá dài, bạn có thể dùng AJAX để tải dữ liệu theo từng từ khóa.
Setup controller endpoint
# app/controllers/tags_controller.rb
class TagsController < ApplicationController def index tags = Tag.where("name ILIKE ?", "%#{params[:q]}%") render json: tags.map { |t| { id: t.id, text: t.name } } end
end
Route
# config/routes.rb
resources :tags, only: [:index]
HTML & JS
# erb
<%= f.select :tag_ids, [], {}, multiple: true, class: "ajax-select2", data: { url: tags_path } %>
# js
document.addEventListener("turbo:load", function () { $('.ajax-select2').select2({ ajax: { url: function () { return $(this).data('url'); }, dataType: 'json', delay: 250, data: function (params) { return { q: params.term }; }, processResults: function (data) { return { results: data }; }, cache: true } });
}); 5. Kết luận
Việc sử dụng Select2 trong ứng dụng Rails không chỉ giúp nâng cao trải nghiệm người dùng mà còn mở ra khả năng xử lý dữ liệu linh hoạt, đặc biệt với dropdown có nhiều lựa chọn. Hi vọng với bài viết này của mình chia sẻ sẽ giúp ích được các bạn trong việc apply select2 vô trong ứng dụng của mình. Thank you.
Link tài liệu: https://select2.org/