如何通过Select2的JQuery代码预加载表单下拉集合数据？

1. 修改Rails表单代码 #

移除collection: Customer.all，不再通过表单预加载所有客户选项，改为动态异步加载：

= f.input :tag_ids, label: t("activerecord.attributes.tag.tags"), input_html: { class: "js-example-basic-multiple js-example-responsive", multiple: true, id: "customer"}, include_blank: false

2. 配置Select2异步加载逻辑 #

更新jQuery代码，添加ajax配置实现动态拉取Customer数据，同时适配Select2的数据格式要求：

$("#customer").select2({
  maximumSelectionLength: 5,
  minimumInputLength: 1,
  tags: true,
  tokenSeparators: [",", " "],
  // 新增AJAX异步加载配置
  ajax: {
    url: "/customers/search", // 替换为你的客户搜索接口路径
    dataType: "json",
    delay: 250, // 输入延迟，减少高频请求
    data: function(params) {
      return {
        q: params.term // 传递用户输入的搜索关键词
      };
    },
    processResults: function(data) {
      // 将后端返回的客户数据转换为Select2需要的格式
      return {
        results: data.map(function(customer) {
          return {
            id: customer.id,
            text: customer.name // 替换为你要显示的客户字段，如名称/邮箱等
          };
        })
      };
    },
    cache: true // 开启缓存，避免重复请求相同关键词
  },
  // 编辑场景回显已选值：如果是编辑页面，需要初始化已选中的客户
  initSelection: function(element, callback) {
    var ids = $(element).val();
    if (ids && ids.length > 0) {
      $.ajax({
        url: "/customers/load_selected", // 获取已选客户详情的接口
        dataType: "json",
        data: { ids: ids }
      }).done(function(data) {
        callback(data.map(function(customer) {
          return { id: customer.id, text: customer.name };
        }));
      });
    }
  },
  language: {
    maximumSelected: function (e) {
      return I18n.t("products.alert.limit_max");
    },
    inputTooShort: function (e) {
      return I18n.t("products.alert.limit_min");
    },
    noResults: function(){
      return I18n.t('products.alert.not_result_found');
    }
  },
});

3. 后端补充对应接口 #

在CustomersController中添加两个接口：

客户搜索接口 #

def search
  @customers = Customer.where("name LIKE ?", "%#{params[:q]}%") # 根据实际业务调整查询字段
  render json: @customers.select(:id, :name) # 返回Select2需要的字段
end

已选客户加载接口（编辑场景用） #

def load_selected
  @customers = Customer.where(id: params[:ids])
  render json: @customers.select(:id, :name)
end

配置路由 #

在config/routes.rb中添加路由规则：

resources :customers do
  collection do
    get :search
    get :load_selected
  end
end

注意事项 #

• 确保后端返回的JSON数据包含id和对应显示字段（示例中为name），与前端processResults的转换逻辑匹配
• 若不需要编辑页面的回显功能，可以移除initSelection部分代码
• 可根据实际需求调整delay参数，平衡搜索响应速度和请求频率
• 搜索查询逻辑可扩展为多字段匹配（如同时搜索名称、邮箱），优化用户体验

内容的提问来源于stack exchange，提问作者Samuel D.