Rails タグオートコンプリート時に、使用数を表示させたい。

Question

###前提・実現したいこと
Ruby on Railsでアプリを作成しています。
タグ管理をしていて、入力時のオートコンプリートまでは実装出来たのですが、
タグの使用数が入力時にわかればどんなタグがメジャーなのかわかって良いかと思ったので表示させたいと思っています。
手順の検討がつかないのでなんとなくの手順でもいいので分かる方いらっしゃいましたら教えていただけますでしょうか。

###発生している問題・エラーメッセージ
オートコンプリートで表示させる文字に数量を表示させると数量を含んだ文字がタグとしてセットされてしまうので失敗でした。
そこで入力が完了してからその文字を含むタグを検索してリスト表示させる仕様がいいかと思ったのですがどのような
処理手順を踏めば良いか検討つきませんでした。

###参考画像

（引用）Qiitaさんの投稿画面
このようなサジェスト機能が理想的です・・・。

###ソースコード

views/items/_item.html.haml

.full_display_container
  .item_form
    = form_for(@item, html: { multipart: true }) do |f|
      = render 'shared/error_messages', object: f.object
      .field
        = f.text_field :title, :placeholder => "タイトル", class: 'form-control', required: true
        %ul#item-tags

    ・・・

items.js

// タグのオートコンプリートと編集画面時のタグセット処理
$(document).on('ready page:load', function() {
  var i, len, ref, results, tag;
  $('#item-tags').tagit({
    placeholderText: 'タグを入力してください・・・',
    fieldName: 'item[tag_list]',
    singleField: true,
    availableTags: gon.available_tags
  });
  if (gon.item_tags != null) {
    ref = gon.item_tags;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
      tag = ref[i];
      results.push($('#item-tags').tagit('createTag', tag));
    }
    return results;
  }
});

class ItemsController < ApplicationController

# タグ関連
  before_action :set_available_tags_to_gon, only: [:new, :edit]
  before_action :set_item_tags_to_gon, only: [:edit]

・・・

private
  ・・・
    # --- Tag関連 ---
    def set_item_tags_to_gon
      gon.item_tags = @item.tag_list_entry.split(",")
    end

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

###補足情報(言語/FW/ツール等のバージョンなど)
ruby 2.3.0
rails 4.2.4

Answer 1

僕は下記仕様で実装しました

1.投稿回数付きのタグ名リストを生成して、オートコンプリートとして表示

  def set_available_tags_with_count
    @tag_list_with_count = []
    tag_list = Faq.tags_on(:tags).pluck(:name, :taggings_count)
    tag_list.each do |tag|
      name = tag[0] + '(' + tag[1].to_s + ')'
      @tag_list_with_count.push(name)
    end
  end

2.このままだと投稿回数までタグ名になってしまうので、
オートコンプリートでfocusイベントを無効にし、オートコンプリート選択時に回数表示箇所を切り捨てた状態でテキストフィールドに反映させる

$ ->
    $('#faq_tag_list').tagit
      singleField: true,
      fieldName: 'faq[tag_list]',
      availableTags: tag_list,
      autocomplete: {
        //Enterキー押下でタグ選択させるためtrue
        autoFocus: true,
        // focusをあてただけで選択されるのを防ぐ
        focus: (event, ui) ->
          event.preventDefault()
        delay: 0,
        minLength: 2
      },
      // タグ選択時に（投稿回数）部分をreplace
      preprocessTag: (val) ->
        val.replace(/\(\d+\)/g, "")

Comments

[退会済みユーザー]

うまくできました、ありがとうございます！
感動です！