示例-为RubyonRails 6/7选择2个多AJAX代码(没有Gem)

Question

我一直在努力获得一个动态的基于Select2的多选下拉列表来处理我的Rails 6/7实例。以下是您需要的所有代码。我把它做得很好。

Answer 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标题或应用程序中.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"}) %>

我希望这能帮助到别人。Sean