selectize ajax

选择::Ajax

有用的 Selectize.js 表单控制标签，具有自动完成功能，可以通过 ajax 创建和编辑项目。

安装

将此行添加到应用程序的 Gemfile 中：

 gem 'selectize-ajax'

然后执行：

 $ bundle

或者自己安装：

 $ gem install selectize-ajax

在您的 application.js 中，包含以下内容：

 //= require selectize-ajax

在您的 application.css 中，包含以下内容：

 *= require selectize-ajax

用法

例如，您想创建下拉控件来选择帖子类别

 selectize_ajax_tag f . object , :category_id , collection : Category . collection

此代码生成简单的选择下拉列表。该集合应如下所示：

 [
  ...
  { value : < id > , label : < title > } ,
  ...
] 

 def self . collection
  Category . map do | category |
    { label : category . title , value : category . id }
  end
end

自动完成

要使用 ajax 自动完成功能，您必须添加搜索路径：

 selectize_ajax_tag f . object , :category_id , collection_path : categories_autocomplete_path

默认搜索参数是q ，如果你想使用其他参数，你需要设置search_param进行控制。

添加新项目

您可以从模式窗口添加新项目。为此，您需要：

1. 添加路径和模态目标以选择控制
2. 在控制器上创建模式和动作

<%= selectize_ajax_tag f . object , :category_id ,
    collection : Category . collection ,
    add_path : new_category_path ,
    add_modal : '#new-category-modal'
%>

Bootstrap 模态窗口

  ...
  .modal-header
    % h4 .modal-title
      Create new category

  .modal-body
    = simple_form_for(@category_form, url: categories_path ,
      data: { target: '#new-category-modal' }, remote: true) do |f|
  ...

成功创建新记录后控制器操作应返回 json：

 def create
  ...
  render json : { label : record . title , value : record . id }
end

之后，模式将关闭，并将在下拉列表中选择新记录。

编辑所选项目

要编辑所选项目，您应该添加新模式并编辑操作路径。

<%= selectize_ajax_tag f . object , :category_id ,
    collection : Category . collection ,
    add_path : new_category_path ,
    add_modal : '#new-category-modal' ,
    edit_path : edit_category_path ( @category ) ,
    edit_modal : '#edit-category-modal'
%>

警告：如果您想使用edit_path并且没有用于生成链接路径的记录 ID，则需要使用以下模板：

• 将 ID 替换为字符串{{id}} - edit_category_path(id: '{{id}}')
• 或者使用edit_category_path(id: f.object.category_id || '{{id}}')
• 或者编写没有rails hepler '/category/{{id}}/edit'的硬编码路径（不推荐）

脚本将自动将{{id}}参数替换为所选值。

所有选项

范围	价值观	默认
label	细绳	从对象
value	混合的	从对象
placeholder	细绳	--
wrap_class	字符串|错误的	--
wrap_class_only	真实 |错误的	错误的
label_class	细绳	--
input_html[class]	细绳	--
required	真实 |错误的	从对象
collection	大批	[]
add_modal	细绳	--
add_path	细绳	--
add_button_text	细绳	I18n.t('selectize_ajax.add_button_text')
add_button_class	细绳	--
edit_path	细绳	--
edit_modal	细绳	--
edit_button_text	细绳	I18n.t('selectize_ajax.edit_button_text')
edit_button_class	细绳	--
horizontal	真实 |错误的	真的
collection_path	细绳	--
search_param	细绳	q

贡献

欢迎在 GitHub 上提交错误报告和拉取请求：https://github.com/distroid/selectize-ajax。

执照

该 gem 根据 MIT 许可证条款作为开源提供。