gonを使ってタグ専用のオートコンプリート機能が使えません。

Question

###前提・実現したいこと
タグのオートコンプリート機能を作りたいです。

acts-as-taggable-onとTag-itでタグ機能を実装しました。

###発生している問題・エラーメッセージ

Uncaught ReferenceError: gon is not defined

このエラーですが、
application.html.erbに以下のように追加をすると解決できました。
しかし、それまではオートコンプリート機能がついていたのに使えなくなってしまいます。。。

###該当のソースコード
【layouts/application.html.erb】

・・・
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= include_gon(:init => true) %>①
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
・・・

①あり→オートコンプリート機能使える。「,」を入力してもフォーム内で文字がタグに変化しない。
①なし→オートコンプリート機能使えない。「,」を入力するとフォーム内の文字がタグに変形。
Uncaught ReferenceError: gon is not definedがでる。

【microposts/new.html.erb】

    <%= simple_form_for(@micropost, html: { multipart: true }) do |f| %>
        <div class="form-group">
        <%= f.select :purpose, {"プロトタイプ" => 1, "プレゼンテーション" => 2}, class: :"form-control"%>
        <%= f.label :skill_list, "スキル・特技（カンマ区切り）" %><br>
        <%= text_field_tag 'micropost[skill_list]', @micropost.skill_list.join(','), :id => "article-tags"%>★★★
        <%= f.text_area :title, placeholder: "タイトル", style: :"resize: none;", class: :"center-block form-control"%>
        <%= f.text_area :content, placeholder: "内容", style: :"resize: none;", class: :"center-block form-control m_new_cont"%>
        </div>
        <%= f.submit "投稿する", class: "btn btn-primary center-block" %>
    <% end %>
</div>

【micropost.coffee】

$(document).on 'ready page:load', ->
  $('#article-tags').tagit
    fieldName:   'micropost[skill_list]'
    singleField: true
    availableTags: gon.available_tags

【microposts_controller.rb】

    def set_available_tags_to_gon
      gon.available_tags = Micropost.tags_on(:tags).pluck(:name)
    end

###補足情報(言語/FW/ツール等のバージョンなど)
【gem】

actioncable (5.0.0)
actionmailer (5.0.0, 4.2.5, 4.2.4)
actionpack (5.0.0, 4.2.5, 4.2.4)
actionview (5.0.0, 4.2.5, 4.2.4)
activejob (5.0.0, 4.2.5, 4.2.4)
activemodel (5.0.0, 4.2.5, 4.2.4)
activerecord (5.0.0, 4.2.5, 4.2.4)
activesupport (5.0.0, 4.2.5, 4.2.4)
acts-as-taggable-on (4.0.0)
airbrussh (1.2.0)
arel (7.1.4, 6.0.4, 6.0.3)
autoprefixer-rails (6.7.7.2, 6.3.6.1)
bcrypt (3.1.11)
bigdecimal (1.2.8)
binding_of_caller (0.7.2)
bootstrap-sass (3.3.7, 3.3.6)
builder (3.2.3, 3.2.2)
bundler (1.14.4)
bundler-unload (1.0.2)
byebug (9.0.6, 8.2.4)
capistrano (3.8.1)
capistrano-bundler (1.2.0)
capistrano-rails (1.2.3)
capistrano-rbenv (2.1.1)
coffee-rails (4.1.1)
coffee-script (2.4.1)
coffee-script-source (1.12.2, 1.10.0)
concurrent-ruby (1.0.5, 1.0.4, 1.0.1)
debug_inspector (0.0.2)
devise (4.2.1)
did_you_mean (1.0.0)
erubis (2.7.0)
execjs (2.7.0, 2.6.0)
executable-hooks (1.3.2)
faker (1.7.3)
font-awesome-rails (4.6.3.1)
gem-wrappers (1.2.7)
globalid (0.4.0, 0.3.7, 0.3.6)
gon (6.1.0)
gravatar-ultimate (2.0.0)
i18n (0.8.1, 0.8.0, 0.7.0)
io-console (0.4.5)
jbuilder (2.6.1, 2.4.1)
jquery-rails (4.2.2)
jquery-ui-rails (6.0.1)
json (1.8.6, 1.8.3)
kaminari (1.0.1)
kaminari-actionview (1.0.1)
kaminari-activerecord (1.0.1)
kaminari-bootstrap (3.0.1)
kaminari-core (1.0.1)
kgio (2.11.0)
loofah (2.0.3)
mail (2.6.5, 2.6.4)
method_source (0.8.2)
mime-types (3.1, 3.0)
mime-types-data (3.2016.0521, 3.2016.0221)
mini_portile2 (2.1.0, 2.0.0)
minitest (5.10.1, 5.8.4, 5.8.3)
multi_json (1.12.1, 1.11.2)
net-scp (1.2.1)
net-ssh (4.1.0)
net-telnet (0.1.1)
nio4r (1.2.1)
nokogiri (1.7.1, 1.7.0.1, 1.6.7.2)
orm_adapter (0.5.0)
polyamorous (1.3.1)
power_assert (0.2.6)
psych (2.0.17)
puma (3.8.2)
rack (2.0.1, 1.6.5, 1.6.4)
rack-test (0.6.3)
rails (5.0.0, 4.2.5, 4.2.4)
rails-deprecated_sanitizer (1.0.3)
rails-dom-testing (2.0.2, 1.0.8, 1.0.7)
rails-html-sanitizer (1.0.3)
rails-i18n (5.0.3)
railties (5.0.0, 4.2.5, 4.2.4)
raindrops (0.18.0)
rake (12.0.0, 11.1.2, 10.4.2)
ransack (1.8.2)
rdoc (4.3.0, 4.2.2, 4.2.1)
redis (3.3.3)
request_store (1.3.2)
responders (2.3.0)
rubygems-bundler (1.4.4)
rvm (1.11.3.9)
sass (3.4.23, 3.4.22)
sass-rails (5.0.6, 5.0.4)
sdoc (0.4.2, 0.4.1)
simple_form (3.4.0)
spring (2.0.1, 1.7.1)
sprockets (3.7.1, 3.6.0)
sprockets-rails (3.2.0, 3.0.4)
sqlite3 (1.3.13, 1.3.11)
sshkit (1.13.1)
test-unit (3.1.5)
thor (0.19.4, 0.19.1)
thread_safe (0.3.6, 0.3.5)
tilt (2.0.6, 2.0.2)
turbolinks (5.0.1, 2.5.3)
turbolinks-source (5.0.0)
tzinfo (1.2.3, 1.2.2)
uglifier (3.0.4, 3.0.0)
warden (1.2.7)
web-console (2.3.0)
websocket-driver (0.6.5)
websocket-extensions (0.1.2)

Answer 1

gon.available_tags = Micropost.tags_on(:tags).pluck(:name)

ではなく

gon.available_tags = Micropost.tags_on(:skill_list).pluck(:name)

のような気がします。
Micropost.tags_on(:skill_list)この部分の引数にはタグのカラム名が入っていることを確認してください.

Comments

[s.k]

試してみます！

[NishidaRyu416_]

はい

[NishidaRyu416_]

それより、まだ、解決されてなかったんですね、なかなか解決しないときは英語版nostacjoverflow行くと大抵のことは解決できます！

Answer 2

<%= Gon::Base.render_data %>としてみましたか？？
公式リファレンスではrails4ではこの記述だった気がします。

Comments

[s.k]

ありがとうございます！コードを変更してみましたが、オートコンプリートなし、タグ変換あり、の状態になりました！ちなみに私の環境はRails5.0です。