Useful Selectize.js form control tag with autocomplete, create and edit items by ajax.
MIT License
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:
<%= 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:
{{id}}
- edit_category_path(id: '{{id}}')
edit_category_path(id: f.object.category_id || '{{id}}')
'/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.