Kombination von Jquery UI Autocomplete mit JQuery für ein Stackoverflow-Styling meiner Tags ausgewählt?

Question

Momentan verwende ich erfolgreich jquery ui Autocomplete mit Acts_as_tagable_on Schienen gem.

Ich möchte jedoch, dass meine Tags wie auf StackOverFlow angezeigt werden, wenn Sie eine Frage mit einem X-Zeichen stellen, das angeklickt werden kann, um sie zu entfernen.

Dafür ich Chosen

In gemfile verwenden möchten:

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

In app/assets/Javascripts/application.js wenn die Verwendung mit jQuery

//= require chosen-jquery 

In app/Vermögen /stylesheets/application.css

*= require chosen-compass 

Nein Ich muss die .chosen Funktion für die ID/Klasse des Formulars aufrufen. Aber ich habe es überhaupt nicht zur Arbeit gebracht. Hier ist meine Form:

<%= 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 %> 

Überprüfen Sie die Tags Eingabefeld mit Chrome Developer Tools

<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"> 

Können Sie mir bitte mit dem richtigen Skript zur Verfügung stellen, um diese Form anzuwenden .chosen?

Hier ist mein Versuch am jquery gewählt nennen:

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

Edit: Es fiel mir ein, dass ich die CSS selbst tun, wenn ich herausfinden, wie die eingereichten Tags innerhalb ihrer eigenen stellen Element wie eine ul/li.

Answer 1

Dies ist nicht möglich, jedoch ist eine einfachere Lösung die Verwendung von select2 gem mit acts_as_ta gable_on gem, um das StackOverFlow style-Tagging-System zu erstellen.

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