How can I select from a full table with Selectize.js?

Question

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: 'option1@example.com', name: 'Option1'},
        {email: 'option2@example.com', 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@address.com
        regex = new RegExp('^' + REGEX_EMAIL + '$', 'i');
        match = input.match(regex);
        if (match) return !this.options.hasOwnProperty(match[0]);

        // name <email@address.com>
        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

Answer 1

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);
            }
        });
    }
...

app/controllers/users_controller.rb:

class UsersController < ApplicationController
  def index
    @users = User.all.where(type: "A")
    respond_to do |format|
      format.json { render json: @users}
    end
  end
end

Answer 2

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.