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

Posted 2023-02-15

【中文标题】示例 - Ruby on Rails 6/7 的 Select2 多个 AJAX 代码（没有 Gem）

【英文标题】：Example - Select2 multiple AJAX code for Ruby on Rails 6/7 (without a Gem)

【发布时间】：2021-12-20 14:25:33

【问题描述】：

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

【问题讨论】：

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

【参考方案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") %>

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