我怎样才能从完整的 table 和 Selectize.js 中 select？

Question

我正在尝试使用 selectize-rails gem。我如何使用 selectize 从完整的 table 到 select?

下面的代码允许我多 select "Option1" 和 "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;
    }
});

我怎样才能 select 从一个完整的 table？例如，我有一个名为 "User" 的 table。我怎样才能从 User.all select，而不仅仅是预设选项？

schema.rb:

create_table "things", force: true do |t|
  t.string   "name"
  t.string   "email"
  #...
end

Answer 1

根据 docs，您需要创建一个 load 方法，该方法将使用选项数组调用 callback。将 preload 设置为 true 会强制在创建 select 时填充它。

在你的 .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

因为它只有大约 100 个对象，我认为您不需要在 selectize 代码中乱搞；您可以简单地使用 Rails 动态设置选项，并且 selectize 会使它们看起来很漂亮。

这是我在我的应用中使用的方法，已针对您的方法进行了调整：

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

然后select将#select-to.

我怎样才能从完整的 table 和 Selectize.js 中 select？

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

javascript

ruby

jquery

ruby-on-rails

selectize.js

app/controllers/users_controller.rb: