Selectize::Ajax

Useful Selectize.js form control tag with autocomplete, create and edit items by ajax.

Add this line to your application's Gemfile:

gem 'selectize-ajax'

And then execute:

$ bundle

Or install it yourself as:

$ gem install selectize-ajax

In your application.js, include the following:

//= require selectize-ajax

In your application.css, include the following:

*= require selectize-ajax

For example you want create dropdown control for choosing post category

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

This code generate simple selectize dropdown. The collection should be the following:

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

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

For use ajax autocomplete you must add path for search:

selectize_ajax_tag f.object, :category_id, collection_path: categories_autocomplete_path

By default search param is q, if you want use other param you need set search_param for control.

You can add new item from modal window. For this you need:

1. Add path and modal target to selectize control
2. Create modal and action on controller

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

Bootstrap modal window

  ...
  .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|
  ...

Controller action after success create new record should return json:

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

After that, the modal will close and the new record will be selected on dropdown.

For edit selected item you should add new modal and edit action path.

<%= 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'
%>

WARNING: if you want use edit_path and do not have record id for generate link path you need use following templates:

• Replace ID to string {{id}} - edit_category_path(id: '{{id}}')
• Or use edit_category_path(id: f.object.category_id || '{{id}}')
• Or write hardcoded path without rails hepler '/category/{{id}}/edit' (not recomended)

Script automaticly will be replace {{id}} param to selected value.

Bug reports and pull requests are welcome on GitHub at https://github.com/distroid/selectize-ajax.

The gem is available as open source under the terms of the MIT License.