Select2 自动完成和标记不起作用 Rails 5

Question

我正在构建一个 rails 5 应用程序并使用 acts_as_taggable_on、select2 和 simple_form gem 集成标记功能。

所以基本上我想做的是在新产品表单上标记产品，如果自动完成下拉框中存在标记，则使用现有标记，如果不创建标记。

现在，我有点争论不休，不确定我哪里出错了。

我在表格上得到的只是一个空的多 select 框（下图）

这应该显示为带有下拉列表的文本字段，用户在输入标签名称时会填充该下拉列表。

产品控制器"new"和"create"操作和product_params方法：

  def new
    @product = Product.new

    respond_to do |format|
      format.html
      format.json { render json: @product }
    end
  end

  def create
    @product = Product.new(product_params)

    respond_to do |format|
      if @product.valid?

        @product.save
        format.html { redirect_to @product, flash: { success: "#{@product.name.titleize} has been created & added to the store." } }
        format.json { render json: @product, status: :created, location: @project }
      else
        format.html { render action: "new" }
        format.json { render json: @product.errors, status: :unprocessable_entity }
      end
    end
  end

    def product_params
      params.require(:product).permit(:name, :description, :price, :tag_list, tag_list: [])
    end

我的Js:

// JS Initializer
$(document).on('turbolinks:load', function() {
  // Select2 Tag Creation
  $('.multiple-input').each(function() {
    $(this).select2({
      tags: true,
      tokenSeperators: [','],
      theme: 'bootstrap',
      placeholder: 'seperated by space'
    });
  });
  // Select2 Autocomplete
  $('#product-autocomplete').select2({
      ajax: {
        url: "/products.json",
        dataType: json,
        results: function(data, page) {
          return {
            results: $.map( data, function(product.tag_list, i) {
              return { id: product.id, text: product.tag.name }
            } )
          }
        }
      }
  });

});

我的simple_form输入：

  <%= f.input :tag_list, input_html: { class: 'multiple-input', id: 'product-autocomplete', multiple: "multiple"}, collection: @product.tag_list %>

我已经尝试了一些其他的方法来实现它，但没有成功，我认为这将真正归结为 JS，这是我的致命弱点。我正在学习，但真的很挣扎。这里的任何帮助将不胜感激！如果我遗漏了任何相关信息，请告诉我，我很乐意 post！

编辑 1： 我正在添加我的 google 检查控制台吐出的错误图片。

注意：url：读作 /products.json 而不是图片中显示的 @product。

Answer 1

所以我需要做一些事情来连接这一切..

1.添加标签控制器和资源路由以调用 tags_list

class TagsController < ApplicationController

  def index
    tags = ActsAsTaggableOn::Tag
      .where("name ILIKE ?", "%#{params[:term]}%")
      .select("id, name as text")

    respond_to do |format|
      format.json {render json: tags}
    end
  end

end

resources :tags, only: [:index]

2) 修复 JS 以填充自动完成下拉列表：

// JS Initializer
$(document).on('turbolinks:load', function() {
  // Select2 Tag Creation
  $('.multiple-input').each(function() {
    $(this).select2({
      tags: true,
      tokenSeperators: [','],
      theme: 'bootstrap',
      placeholder: 'seperated by space',
      minimumInputLength: 3,
      ajax: {
        url: "/tags.json",
        dataType: 'json',
        processResults: function(data) {
          console.log(data)
          return {results: data};
        }
      }
    });
  });

});

Select2 自动完成和标记不起作用 Rails 5

Select2 Autocomplete & Tagging not working Rails 5

javascript

ruby-on-rails

jquery-select2

ruby-on-rails-5