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 授權條款作為開源提供。