Reputation: 1895
I'm trying to use the selectize-rails
gem. How can I use selectize to select from a full table?
The following code allows me to multi-select "Option1" and "Option2".
views/users/show.html.erb:
$('#select-to').selectize({
persist: false,
maxItems: null,
valueField: 'email',
labelField: 'name',
searchField: ['name', 'email'],
options: [
{email: '[email protected]', name: 'Option1'},
{email: '[email protected]', name: 'Option2'},
],
render: {
item: function(item, escape) {
return '<div>' +
(item.name ? '<span class="name">' + escape(item.name) + '</span>' : '') +
(item.email ? '<span class="email">' + escape(item.email) + '</span>' : '') +
'</div>';
},
option: function(item, escape) {
var label = item.name || item.email;
var caption = item.name ? item.email : null;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
(caption ? '<span class="caption">' + escape(caption) + '</span>' : '') +
'</div>';
}
},
createFilter: function(input) {
var match, regex;
// [email protected]
regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
match = input.match(regex);
if (match) return !this.options.hasOwnProperty(match[0]);
// name <[email protected]>
regex = new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i');
match = input.match(regex);
if (match) return !this.options.hasOwnProperty(match[2]);
return false;
},
create: function(input) {
if ((new RegExp('^' + REGEX_EMAIL + '$', 'i')).test(input)) {
return {email: input};
}
var match = input.match(new RegExp('^([^<]*)\<' + REGEX_EMAIL + '\>$', 'i'));
if (match) {
return {
email : match[2],
name : $.trim(match[1])
};
}
alert('Invalid email address.');
return false;
}
});
How can I select from a full table? For example, I have a table named "User". How can I select from User.all
, not just pre-set options?
schema.rb:
create_table "things", force: true do |t|
t.string "name"
t.string "email"
#...
end
Upvotes: 0
Views: 1062
Reputation:
Since it's only about 100 objects, I don't think you need to mess around within the selectize code; you can simply dynamically set the options with Rails, and selectize will make them look pretty.
Here's the method I used in my app, adjusted for yours:
<select id='select-to'>
<option value="">Please select an option</option>
<% User.where(type: "A").each do |user| %>
<option value="<%= user.id %>"><%= user.name %></option>
<% end %>
</select>
And then just selectize #select-to.
Upvotes: 1
Reputation: 4371
According to the docs, you need to create a load
method that will invoke callback
with the array of options. Setting preload to true forces it to be populated at the time the select is created.
In your .selectize():
load: function(query, callback) {
$.ajax({
url: 'http://railshost/users.json',
type: 'GET',
dataType: 'json',
data: {
// query: query // if your data source allows
},
error: function() {
callback();
},
success: function(response) {
callback(response.table);
}
});
}
...
class UsersController < ApplicationController
def index
@users = User.all.where(type: "A")
respond_to do |format|
format.json { render json: @users}
end
end
end
Upvotes: 1