# @codevise/activeadmin-searchable\_select 中文文档 规范地址：https://npmcn.com/package/%40codevise/activeadmin-searchable_select/ 版本：1\.9\.0 npm 元数据更新时间：2026-01-02T10:54:01.284Z 中文译文更新时间：2026-11-10T08:15:12.691Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40codevise/activeadmin-searchable_select 原文对照：https://npmcn.com/package/%40codevise/activeadmin-searchable_select/?lang=original 项目主页：https://github.com/codevise/activeadmin-searchable_select#readme 源码仓库：https://github.com/codevise/activeadmin-searchable_select ## 关键信息（来自 npm 元数据） - 包体积（解压后）：14.9 kB，6 个文件 - 模块格式：CommonJS - TypeScript 类型：未声明 - 运行依赖：2 个 - 首次发布：2022-06-07T07:13:00.403Z - 最新版本发布：2026-01-02T10:54:01.032Z - 近 30 天下载量：10357（2026-10-10 至 2026-11-08，npm 官方下载统计） - 已发布版本数：5（近 12 个月 1 个） ## 中文简介 在活动管理表格和过滤器中使用基于Select2的可搜索选择. ## 安装 ```sh npm install @codevise/activeadmin-searchable_select ``` 也可以使用：`pnpm add @codevise/activeadmin-searchable_select`、`yarn add @codevise/activeadmin-searchable_select`、`bun add @codevise/activeadmin-searchable_select` ## README # 活动admin 可搜索选择 [![Gem Version](https://badge.fury.io/rb/activeadmin-searchable_select.svg)](http://badge.fury.io/rb/activeadmin-searchable_select) [![NPM Version](https://badge.fury.io/js/@codevise%2Factiveadmin-searchable_select.svg)](https://badge.fury.io/js/@codevise%2Factiveadmin-searchable_select) [![npm](https://img.shields.io/npm/dm/@codevise/activeadmin-searchable_select)](https://www.npmjs.com/package/@codevise/activeadmin-searchable_select) [![Build Status](https://github.com/codevise/activeadmin-searchable_select/actions/workflows/tests.yml/badge.svg)](https://github.com/codevise/activeadmin-searchable_select/actions) 可搜索的选中框( 通过 [选择2](https://select2.org/)用于 ActiveAdmin 格式和过滤器。 将活动admin资源 DSL 扩展至 允许定义 JSON 端点从同步获取选项. ## 安装 添加 `activeadmin-searchable_select` 到您的宝石文件 : ```ruby gem 'activeadmin-searchable_select' ``` ##### 通过Sprockets使用资产 导入样式表并需要javascript: ```scss // active_admin.css.scss @import "active_admin/searchable_select"; ``` ```coffee // active_admin.js //= require active_admin/searchable_select ``` ##### 通过Webpacker(或任何其他资产捆绑)使用资产作为国家预防机制模块(Yarn软件包) 执行 : ``` $ npm i @codevise/activeadmin-searchable_select ``` 或者说 ``` $ yarn add @codevise/activeadmin-searchable_select ``` 或者手动添加到 `package.json`数字 : ```json "dependencies": { "@codevise/activeadmin-searchable_select": "1.6.0" } ``` 并执行 : ``` $ yarn ``` 将以下行添加到 `app/javascript/active_admin.js`数字 : ```javascript import '@codevise/activeadmin-searchable_select'; ``` 将以下行添加到 `app/javascript/stylesheets/active_admin.scss`数字 : ```css @import '@codevise/activeadmin-searchable_select'; ``` ## 使用量 ### 使选择框可以搜索 要将搜索功能添加到选定的框中,请使用 `:searchable_select` 输入类型 : ```ruby ActiveAdmin.register Product do form do |f| f.input(:category, as: :searchable_select) end end ``` 这对过滤器也有效 : ```ruby ActiveAdmin.register Product do filter(:category, as: :searchable_select) end ``` 默认情况下,您只能一次选择一个过滤器. 你们可以 指定一个多选择,其方式是: ```ruby ActiveAdmin.register Product do filter(:category, as: :searchable_select, multiple: true) end ``` ### 通过 Ajax 获取选项 对于大型收藏,制作整套选项可以做到: 贵了 使用 `ajax` 选项以获取一组匹配选项 一旦用户开始输入 : ```ruby ActiveAdmin.register Product do filter(:category, as: :searchable_select, ajax: true) end ``` 如果输入属性对应 ActiveAdmin 资源,则它是 提供选项的 JSON 端点。 使用 页:1 `searchable_select_options` 定义所需方法 收集动作 : ```ruby ActiveAdmin.register Category do searchable_select_options(scope: Category.all, text_attribute: :name) end ``` 默认, `scope` 需要启用 Ransack 活动记录 用于确定哪些选项的收藏代理。 这个 属性 `text_attribute` 将用来获取显示名称 每个记录。 Via Ransack, 也用来通过搜索过滤 术语。 限制结果集大小会自动处理 . 您可以自定义显示文本 : ```ruby ActiveAdmin.register Category do searchable_select_options(scope: Category.all, text_attribute: :name, display_text: ->(record) { "Category: #{record.name}" } ) end ``` 请注意: `text_attribute` 仍然需要通过 兰萨克 你可以通过 `filter` 选项,以指定自己的 过滤策略 : ```ruby ActiveAdmin.register Category do searchable_select_options(scope: Category.all, text_attribute: :name, filter: lambda |term, scope| scope.ransack(name_cont_all: term.split(' ')).result end) end ``` `scope` 也可以是一种羊肉,在以下背景下加以评估: 帮助定义的收集动作 : ```ruby ActiveAdmin.register Category do searchable_select_options(scope: -> { Category.allowed_for(current_user) }, text_attribute: :name) end ``` 如果输入属性设定在窗体对象上, ajax 则基于 可搜索选择将自动变成单一选项以确保 选定项目在选项之前正确显示 同步装入 . #### 指定选项端点资源 如果无法猜测提供选项终点的资源 基于输入属性名称,您可以通过一个 `resource` 键为 `ajax` 选项 : ```ruby ActiveAdmin.register Product do form do |f| f.input(:additional_category, as: :searchable_select, ajax: { resource: Category }) end end ``` #### 每个资源的多选项终点 单个 ActiveAdmin 资源可以定义多个选项端点: ```ruby ActiveAdmin.register Category do searchable_select_options(name: :favorites, scope: Category.favorites, text_attribute: :name) searchable_select_options(name: :recent, scope: Category.recent, text_attribute: :name) end ``` 要指定要使用的集合,请用 `collection_name` 键为 `ajax` 选项 : ```ruby ActiveAdmin.register Product do form do |f| f.input(:category, as: :searchable_select, ajax: { collection_name: :favorites }) end end ``` #### 查询多个属性 ActiveAdmin可搜索选择查询由兰萨克进行. 这样,你可以 将您的查询构建为可以同时查询多个属性的方式. ```ruby ActiveAdmin.register User do searchable_select_options(scope: User.all, text_attribute: :username, filter: lambda do |term, scope| scope.ransack(email_or_username_cont: term).result end) end ``` 在这个例子中 `all` 范围将查询 `email OR username`。 。 。 . 您可以添加附加的有效载荷作为 dsl 选项 : ```ruby ActiveAdmin.register Category do searchable_select_options(scope: Category.all, text_attribute: :name, additional_payload: ->(record) { { foo: record.bar } } ) end ``` 使用额外负载的响应示例 : ```json { "results": [{ "id": "1", "text": "Bicycles", "foo": "Bar" }], "pagination": { "more": "false" } } ``` #### 通过参数 您可以通过附加参数到选项终点 : ```ruby ActiveAdmin.register Product do form do |f| f.input(:category, as: :searchable_select, ajax: { params: { some: 'value' } }) end end ``` 羊肉的经过是 `scope` 可以先接收这些参数 参数 : ```ruby ActiveAdmin.register Category do searchable_select_options(scope: lambda do |params| Category.find_all_by_some(params[:some]) end, text_attribute: :name) end ``` #### 嵌入式资源路径选项 以下设置示例: ```ruby # Models class OptionType < ActiveRecord::Base; end class OptionValue < ActiveRecord::Base belongs_to :option_type end class Product < ActiveRecord::Base belongs_to :option_type has_many :variants end class Variant < ActiveRecord::Base belongs_to :product belongs_to :option_value end # ActiveAdmin ActiveAdmin.register(OptionType) ActiveAdmin.register(Product) ActiveAdmin.register(OptionValue) do belongs_to :option_type searchable_select_options(scope: lambda do |params| OptionValue.where( option_type_id: params[:option_type_id] ) end, text_attribute: :value) end ``` 有可能通过路径参数正确生成嵌入式资源的 URL `path_params` ```ruby ActiveAdmin.register(Variant) do belongs_to :product form do |f| ... f.input(:option_value, as: :searchable_select, ajax: { resource: OptionValue, path_params: { option_type_id: f.object.product.option_type_id } }) ... end end ``` 这将生成获取路径为 `all_options_admin_option_type_option_values(option_type_id: f.object.product.option_type_id)` (例如:. `/admin/option_types/2/option_values/all_options`(中文(简体) ) #### 在特性测试中嵌入 Ajax 选项 写入 UI 驱动特性规格( 即与 Capybara) 时, 同步加载选定的选项可以增加测试 复杂. `activeadmin-searchable_select` 提供选项 将所有可用的选项与普通选择输入一样,同时 仍然执行相同的代码路径,包括 `scope` 财务报告和审定财务报表 `text_attribute` 处理. 例如使用 RSPEC/ Capybara, 简单设置 `inline_ajax_options` 真实 特性规格 : ```ruby RSpec.configure do |config| config.before(:each) do |example| ActiveAdmin::SearchableSelect.inline_ajax_options = (example.metadata[:type] == :feature) end end ``` ### 传递选项到选择2 可以通过并定义配置选项来选择2 通过 `data-attributes` 使用嵌入式(子密钥)选项. 属性需要添加到 `input_html` 选项. 例如,您可以告诉Select2在用户之后等待多长时间 发送请求前已停止输入 : ```ruby ... f.input(:category, as: :searchable_select, ajax: true, input_html: { data: { 'ajax--delay' => 500 } }) ... ``` ## 发展 要运行测试, 安装捆绑的宝石并引用 RSPEC : ``` $ bundle $ bundle exec rspec ``` 测试套房可以针对不同版本的"铁路"和"铁路"运行 活动管理员(参见 `Appraisals` 文件名 : ``` $ appraisal install $ appraisal rspec ``` 请确保修改符合样式指南 : ``` $ bundle exec rubocop ``` ## 鸣谢 依据 [fairburn/活动admin-select2](https://github.com/mfairburn/activeadmin-select2)。 。 。 . ## 常见问题 ### @codevise/activeadmin-searchable\_select 是什么？ 在活动管理表格和过滤器中使用基于Select2的可搜索选择\. ### 如何安装 @codevise/activeadmin-searchable\_select？ 在项目目录运行 npm install @codevise/activeadmin-searchable\_select，或使用 pnpm add / yarn add / bun add。 ### @codevise/activeadmin-searchable\_select 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/codevise\_\_activeadmin-searchable\_select 是否存在。 ### @codevise/activeadmin-searchable\_select 支持 ESM 还是 CommonJS？ 以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。 ### @codevise/activeadmin-searchable\_select 可以商用吗？ @codevise/activeadmin-searchable\_select 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @codevise/activeadmin-searchable\_select 的下载量有多少？ 根据 npm 官方下载统计，@codevise/activeadmin-searchable\_select 在 2026/10/10 – 2026/11/08 这 30 天内被下载 10,357 次，日均约 345 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @codevise/activeadmin-searchable\_select 还在维护吗？ 最新版本 1\.9\.0 发布于 2026/01/02（10 个月前）；至今共发布 5 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/06/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。