示例 - Ruby on Rails 6/7 的 Select2 多个 AJAX 代码（没有 Gem）答案

【问题标题】：Example - Select2 multiple AJAX code for Ruby on Rails 6/7 (without a Gem)示例 - Ruby on Rails 6/7 的 Select2 多个 AJAX 代码（没有 Gem）
【发布时间】：2021-12-20 14:25:33
【问题描述】：

我在使用我的 Rails 6/7 实例时很难获得基于 Select2 的动态多项选择下拉菜单。以下是您需要的所有代码。我让它完美地工作。

【问题讨论】：

如果您的问题包含两者，您是在提问还是提供答案，您可以将其拆分为问题，然后添加支持该问题的答案。

标签： html ruby-on-rails ruby jquery-select2 select2-rails

【解决方案1】：

在我的项目中，我的用户正在编辑故事/文章并添加多个标签。由于我有数千个标签可供选择，我希望从数据库中动态进行查找。此外，我希望他们能够即时添加新标签。

标签下拉的控制器方法：

def search
  name = tags_params[:search]
  result = Tag.where("name ILIKE '%#{ name }%'").order('LENGTH(name)').limit(10).map{ |x| {:id => x.id, :text => x.name} }
  render :json => {:results => result}
end

编辑/新建页面的控制器方法：

def edit
  @taggings = {}
  @taggings = @story.tags.map{|x| x.id}
  @tags = Tag.where(id: @taggings).or(Tag.where(public: true))
end

JSON标签查找路径：

get "/tags/search" => "tags#search"

Javascript/JS 文件：

$(document).ready(function() {
  $('.js-multiple').select2({
    minimumInputLength: 3,
    placeholder: 'Search',
    tokenSeparators: ',',
    tags: true,
    ajax: {
      url: '/jax/tags/search',
      quietMillis: 300,
      data: function (params) {
        var query = {
          search: params.term
        }
      return query;
    }
  }
});
});

在 HTML 标头或 application.html.erb 中

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.full.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

HTML ERB：

<%= collection_select(nil, "taggings", @tags, :id, :name, options = {:selected => @taggings}, html_options = {:multiple => "multiple", :class =>"js-multiple"}) %>

我希望这对某人有所帮助。肖恩

【讨论】：