みずぎわブログ

技術系のことや日々に考えたことを書き連ねます

Tag-itでこれまでに付けられたタグ一覧を表示して,クリックするとタグを追加

 

Railsでタグを実現するときにお馴染みなのがacts-as-taggable-onだ.

ただし入力のUIまでサポートされていないので,好みのjQuery等を使用する必要がある.

 

そして,jQueryのTag-it(http://aehlke.github.io/tag-it/ )を使うとタグ入力を綺麗に実現できる.

f:id:yusuke0h:20131030174914p:plain

 これまでに付けられたタグを表示しそこから追加するタグを選択したい場合には以下のようにするといい.

 

 

コントローラー

@products = Product.all

@tags = @products.tag_counts.map(&:name) 

 

 

ビュー

<p>これまでのタグ一覧 クリックすると追加されます。</p>

<% @tags.each do |tag| %>

     <p class="tags btn"><%= tag %></p>

<% end %>

 

<script type="text/javascript">

$(function(){

  $(".tags").click(function () {

    var tag = $(this).text();

    $("#myTags").tagit("createTag", tag);

  });

});

</script>

 

完成図

f:id:yusuke0h:20131030174914p:plain