Select2 Autocomplete & Tagging не работает Rails 5 - PullRequest
Новая
       35

Select2 Autocomplete & Tagging не работает Rails 5

0 голосов
/ 20 апреля 2019

Я создаю приложение rails 5 и интегрирую функцию тегов, используя ges Act_as_taggable_on, select2 и simple_form.

По сути, я пытаюсь сделать тег на продукте в новой форме продукта,если тег существует в раскрывающемся списке автозаполнения, используйте существующий тег, если не создаете тег.

Прямо сейчас, я немного болтаю и не знаю, где я ошибаюсь.

Все, что я получаю в форме - это пустое поле множественного выбора (ниже)enter image description here

это должно появиться в виде текстового поля с раскрывающимся списком, который заполняется, когда пользователь вводит имена тегов.

Контроллер продукта "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и это моя ахиллесова пята.Я учусь, но на самом деле борюсь с этим.Любая помощь здесь будет принята с благодарностью!Пожалуйста, если я пропустил любую соответствующую информацию, дайте мне знать, я буду рад опубликовать!

РЕДАКТИРОВАТЬ 1: Я добавляю рис ошибки, которую выдает моя консоль google inspect.

Примечание: URL: читает /products.json, а не @product, показанный на изображении.

enter image description here

1 Ответ

0 голосов
/ 20 апреля 2019

Так что мне нужно было сделать несколько вещей, чтобы все это подключить ..

1.Добавить контроллер тегов и маршрут ресурса для вызова списка тегов 

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};
        }
      }
    });
  });

});
...