Jquery UIのオートコンプリートをJqueryと組み合わせると、自分のタグのStackoverflowスタイリングができますか？

Question

現在、私は正常にjquery uiオートコンプリートをacts_as_taggable_on rails gemと併用しています。

しかし、StackOverFlowのように表示されるようにするには、クリックするとXマークを付けて削除することができます。アプリ/資産/ JavaScriptの中へ

gem 'compass-rails' 
gem 'chosen-rails' 

/application.jsアプリ/資産の中へのjQuery

//= require chosen-jquery 

で使用する場合：

私はgemfile中に、 Chosen

を使用したい。このため

/stylesheets/application.css

*= require chosen-compass 

いいえフォームのID /クラスで.chosen関数を呼び出す必要があります。しかし、私はそれをまったく動かさなかった。ここに私の形式は次のとおりです。

<%= form_for :photo, url: photos_path, html: {multipart: true } do |f| %> 
    <%= f.file_field :picture %> 
    <%= f.text_field :title %> 
    <%= f.autocomplete_field :tag_list, autocomplete_tag_name_photos_path, :placeholder => 'Tags', :"data-delimiter" => ', ', 'data-auto-focus' => true %> 
    <%= f.submit %> 
<% end %> 

は、Chromeデベロッパーツールで

<input placeholder="Tags" data-delimiter=", " data-auto-focus="true" data-autocomplete="/photos/autocomplete_tag_name" type="text" name="photo[tag_list]" id="photo_tag_list" class="ui-autocomplete-input" autocomplete="off"> 

をタグ入力ボックスを点検し、あなたがこのフォームに.chosen適用するために適切なスクリプトを私に提供してくださいできますか？ここで

は、選択されたを呼び出すためのjQueryで私の試みです：

$(document).on('page:change', function() { 
    $('#photo_tag_list').chosen 
    allow_single_deselect: true; 
    no_results_text: 'No results matched'; 
    width: '200px'; 
}); 

編集：私が自分自身の内側に提出されたタグを配置する方法を見つけ出すことができれば、私はCSSを自分で行うことができることを私に起こりました要素（ul/liなど）。

Answer 1

これはできませんが、より簡単な解決策は、acts_as_taggable_on gemでselect2 gemを使用してStackOverFlowスタイルタグシステムを作成することです。

https://github.com/argerim/select2-rails