Question

我正在构建Rails 5 App，并使用acts_as_taggable_on，select2和simple_form gem集成了Tagging功能。

因此，基本上我想做的是在新产品表单上标记产品，如果该标记存在于自动填充下拉框中，则使用现有标记，如果不创建该标记。

现在，我有点傻瓜，不确定我要去哪里。

我在表格上得到的只是一个空的多重选择框（如下）

这应该显示为文本字段，并带有一个下拉列表，当用户输入标签名称时，该下拉列表将填充。

产品控制器的“新建”和“创建”操作以及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，这就是我的致命弱点。我正在学习，但确实为此感到挣扎。在这里的任何帮助将不胜感激！如果我错过了任何相关信息，请告诉我，我将很乐意发布！

编辑1： 林添加我的谷歌检查控制台吐出来的错误图片。

注意：网址：读取/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

1 个答案: