Почему это поле автозаполнения не работает?

Question

Я пытаюсь использовать это поле автозаполнения с набором предварительно заполненных жанров.

Жанр имеет ассоциацию has_and_belongs_to_many с профилем.

У меня есть это в моеммаршруты:

resources :profiles
resources :genres

Это контроллер моего жанра:

respond_to :html, :json

def index
  respond_with(@genres = Genre.search(params[:q]))
end

А это моя модель жанра:

has_and_belongs_to_many :videos
has_and_belongs_to_many :profiles

scope :search, lambda {|q| where("name LIKE ?", '%q%') }

Это в моем приложении.js:

$("#genre_field").tokenInput(genres_path);

Это мой вид редактирования профиля:

<%= f.fields_for :genre do |g| %>
 <div class="field">
      <%= g.label :name, "Genres" %><br />
      <%= g.text_field :name, :id => 'genre_field' %>
  </div>
<% end %>

Я уже заполнил таблицу жанров набором жанров и включаю файлы jquery.tokeninput.js и CSS.

Так почему в текстовом поле не отображаются результаты автозаполнения?Чего мне не хватает?

Answer 1

Судя по вашим комментариям, я понял вашу проблему.В вашем application.js у вас есть следующее:

$("#genre_field").tokenInput(genres_path);

, которое отображает элемент DOM #genre_field для получения данных от genres_path.

genres_path, однако, не существует в контексте вашего файла JavaScript.Метод genres_path существует в ruby, потому что rails генерирует этот метод через rout.rb, а не в JS.Чтобы это исправить, вам нужно указать относительный путь, который genres_path представляет в вашем коде JS:

$("#genre_field").tokenInput("/path/to/genres");

или

Вам необходимо создать какой-то файл js.erb, который использует genres_path:

$("#genre_field").tokenInput(<%= genres_path %>);

или

Youможете добавить встроенный скрипт в файл html.erb, который обрабатывает весь этот код аналогично файлу js.erb:

<%= f.fields_for :genre do |g| %>
 <div class="field">
     <%= g.label :name, "Genres" %><br />
     <%= g.text_field :name, :id => 'genre_field' %>
 </div>
<% end %>

<script>
    $("#genre_field").tokenInput(<%= genres_path %>);
</script>