【Rails】rails4-autocompleteを実装しようとしているのですが、フォームに候補が表示されない

オートコンプリートでフォームに入力した値を補完して候補を表示させたいのですが、フォームに入力しても候補がなにも表示されない状態です。DBから候補を引っ張ってこれていないのが原因なのでしょうか。ググってかたっぱしから試してみてもうまくいかず、お手上げ状態です。

gemはrails4-autocompleteを入れてます。
バージョン：Rails 5.2.3

フォームの候補データは model名：idol、column名：idol_nameから引っ張っています。

controllers/images_controller.rb

class ImagesController < ApplicationController

  autocomplete :idol, :idol_name, full: true

end

config/routes.rb

Rails.application.routes.draw do
  root "images#index"

~~~~

  resources :images do
    get :autocomplete_idol_idol_name, :on => :collection
  end

~~~~

end

views/images/index.html.erb

<%= form_with model: @image, local: true do |form| %>

  <%= form.autocomplete_field :idol_name, autocomplete_idol_idol_name_images_path %>

<% end %>

よろしくお願い致しますｓ。

--------追記--------

返信が遅れました。申し訳ございません。

chromeのツールから確認したところ、[DOM]一意でないIDを持つ2つの要素が見つかりました　と表示されていました。

Worningの内容

[DOM] Found 2 elements with non-unique id #image_idol_name: (More info: https://goo.gl/9p2vKq)
 <select name="image[idol_name]" id="image_idol_name">
　<option value></option>
　　<option value="田中太郎">田中太郎</option>
　　<option value="伊藤次郎">伊藤次郎</option>
　　<option value="山田花子">山田花子</option>
　　・
　　・
　　・
　</select> 
<input data-autocomplete="/images/autocomplete_idol_idol_name" type="text" name="image[idol_name]" id="image_idol_name">

JS側のエラーはなかったです。どこかRailsの記述内容が間違っているからこの注意書きが表示されているっぽい？
「一意でないIDを持つ2つの要素が見つかりました」の部分を見直してみます。

退会済みユーザー

2020/01/01 06:16 編集

rails4-autocompleteを使ったことはないんですが javascript 側に何の変更もなしに動くとは思えないので application.js に require 'rails4-autocomplete' か javascript_include_tag 的なものがいると思います。あと rails4 ってかいてるけど 5 に対応してるんでしょうか。jquery-ui のオートコンプリートを使えば自分で候補を返すコントローラはかく必要がありますがジェムのブラックボックスではまることは無いかもしれないです。

Boston12121

2020/01/01 11:00 編集

返答ありがとうございます。 rails4-autocompleteはrails5に対応しているっぽいので問題ないと思います。また jsファイル //= require autocomplete-rails cssファイル　*= require jquery-ui を追記しています。 JS側の処理はautocompleteがよしなにしてくれるという認識でいたのですが、やはりJS側の処理の記述は必要かもしれないです。もう少し調べて色々試してみます。ありがとうございます。

退会済みユーザー

2020/01/01 13:07

コレ自体 jquery-ui をつかったものなのですね。とりあえず chrome の F12 とかで JS エラーが出てないですか？オートコンプリートFORMに文字を入力したときに Rails にリクエストがとんできてますか？ Rails は 200 正常なレスポンスを返してますか？　このあたりを確認して原因を切り分けたいです

Boston12121

2020/01/02 13:56

返信が遅れてしまいました。申し訳ございません。ツールで確認した内容を追記しました。一応JS側のエラーは出ていませんでした。Railsの記述内容が間違っているっぽい？です。

退会済みユーザー

2020/01/02 17:25 編集

ドキュメントよんだ限りJSはrequireだけで特に何もする必要ないみたいですね。IDの問題が解決すれば動くのでは… あと autocomplete に渡す minLength が 2 で固定されてるので 2 文字までうたないとコンプリート作動しないみたいです( https://github.com/peterwillcn/rails4-autocomplete/blob/master/lib/assets/javascripts/autocomplete-rails-uncompressed.js#L94 http://js.studio-kingdom.com/jqueryui/widgets/autocomplete ) それでも動かなければ Chrome 開発ツールの Network > xhr を開いた状態で２文字うってみて Rails コンソールのログと Chrome 開発ツールの Network ajax のヘッダ、レスポンスを追記してほしいです