如何在Ruby on Rails 6/7中不借助Gem实现Select2多选AJAX功能？

我在Rails 6/7环境中调试基于Select2的动态多选下拉菜单功能时遇到阻碍，经调试已完美实现需求，无需引入额外Gem，下面是全部可直接使用的实现代码。

实现步骤 #

1. 静态资源引入 #

将Select2的JS、CSS静态文件放入项目对应静态资源目录：

• JS文件放入 vendor/javascript 目录
• CSS文件放入 vendor/assets/stylesheets 目录

以Rails 7使用importmap为例，在config/importmap.rb中添加资源映射：

pin "select2", to: "select2.min.js"
pin "select2/css", to: "select2.min.css"

2. 后端搜索接口配置 #

路由配置

在config/routes.rb中添加搜索路由：

# 可根据业务替换为对应的模型搜索路由
get "/users/search", to: "users#search", as: :search_users

接口逻辑实现

在对应控制器中添加搜索方法：

def search
  # 可根据业务调整搜索逻辑、返回字段、返回条数限制
  @users = User.where("name LIKE ?", "%#{params[:q]}%").limit(20)
  render json: @users.map { |user| { id: user.id, text: user.name } }
end

3. 表单视图代码 #

在需要添加多选下拉的表单中插入如下代码：

<%= form.label :selected_user_ids, "选择关联用户" %>
<%# 编辑场景下可将已选选项作为第二个参数传入，实现默认回显 %>
<%= form.select :selected_user_ids, [], {}, multiple: true, class: "select2-multiple", data: { url: search_users_path } %>

编辑场景回显示例：

<%= form.select :selected_user_ids, @current_model.users.pluck(:name, :id), {}, multiple: true, class: "select2-multiple", data: { url: search_users_path } %>

4. Select2初始化JS #

在app/javascript/application.js中添加初始化逻辑：

import "select2"
import "select2/css"

// 兼容Turbo驱动的Rails应用，非Turbo项目可替换为DOMContentLoaded事件
document.addEventListener("turbo:load", function() {
  $(".select2-multiple").each(function() {
    $(this).select2({
      ajax: {
        url: $(this).data("url"),
        dataType: 'json',
        delay: 250,
        data: function (params) {
          return {
            q: params.term
          };
        },
        processResults: function (data) {
          return {
            results: data
          };
        },
        cache: true
      },
      placeholder: "请输入关键词搜索后选择",
      allowClear: true,
      multiple: true,
      minimumInputLength: 1
    });
  });
});

5. 后端参数接收配置 #

在对应业务控制器的强参数方法中，将多选参数配置为数组类型：

def your_model_params
  params.require(:your_model).permit(
    # 其他业务参数
    selected_user_ids: []
  )
end

内容的提问来源于stack exchange，提问作者Sean Mitchell