ActiveAdmin如何通过AJAX调用实现Tags过滤器动态加载

实现步骤 #

• 调整过滤器配置
  移除原有配置里预加载全量标签的collection逻辑，改用支持异步加载的搜索下拉类型，配置AJAX相关参数：

  # 对应ActiveAdmin资源文件内的过滤器配置
  filter :tags,
    label: 'Tags',
    as: :searchable_select,
    ajax: {
      url: -> { admin_search_tags_path },
      delay: 250, # 输入停顿250ms后再发起请求，减少无效请求
      per_page: 20, # 单次请求返回结果上限
      selected: ->(selected_ids) {
        # 回显已选中的标签，解决异步加载模式下已选值不显示的问题
        ActsAsTaggableOn::Tag.where(id: selected_ids)
          .pluck(:id, :name)
          .map { |id, name| { id: id, text: name } }
      }
    }
  

• 编写标签搜索接口
  先添加路由配置：

  # config/routes.rb
  get '/admin/search_tags', to: 'admin/tags#search', as: :admin_search_tags
  

  实现接口逻辑：根据用户输入的关键词返回匹配的标签，返回格式适配下拉组件要求（包含id、text字段），无输入时默认返回空集合，避免页面初始加载全量标签：

  # app/controllers/admin/tags_controller.rb
  class Admin::TagsController < ActiveAdmin::BaseController
    def search
      tags = if params[:q].present?
        ActsAsTaggableOn::Tag.where('name LIKE ?', "%#{params[:q]}%")
      else
        ActsAsTaggableOn::Tag.none
      end.order(id: :asc).limit(params[:per_page] || 20)
  
      render json: tags.map { |tag| { id: tag.id, text: tag.name } }
    end
  end
  

• 优化查询性能
  给标签表的name字段添加数据库索引，避免数据量上涨后模糊查询卡顿：

  # 数据库迁移文件
  class AddIndexToTagsName < ActiveRecord::Migration[6.1]
    def change
      add_index :tags, :name
    end
  end
  

低版本兼容方案 #

如果当前使用的ActiveAdmin版本没有内置searchable_select异步下拉组件，可以手动引入select2前端组件，给标签过滤器的下拉框绑定输入监听事件，用户输入关键词时调用上述搜索接口，将返回结果填充为下拉选项即可，后端接口逻辑无需调整。

内容的提问来源于stack exchange，提问作者hurab afzal