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:
- Add path and modal target to selectize control
- 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.
Parameter | Values | Default |
---|---|---|
label |
string | From object |
value |
mixed | From object |
placeholder |
string | -- |
wrap_class |
string | false | -- |
wrap_class_only |
true | false | false |
label_class |
string | -- |
input_html[class] |
string | -- |
required |
true | false | From object |
collection |
array | [] |
add_modal |
string | -- |
add_path |
string | -- |
add_button_text |
string | I18n.t('selectize_ajax.add_button_text') |
add_button_class |
string | -- |
edit_path |
string | -- |
edit_modal |
string | -- |
edit_button_text |
string | I18n.t('selectize_ajax.edit_button_text') |
edit_button_class |
string | -- |
horizontal |
true | false | true |
collection_path |
string | -- |
search_param |
string | q |
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.