Combine Jquery UI Autocomplete with Jquery Chosen for a Stackoverflow styling of my tags?

Question

Currently I am successfully using jquery ui autocomplete with acts_as_taggable_on rails gem.

However, I want my tags to be displayed like they are on StackOverFlow when you ask a question with an X mark that can be clicked to remove them.

For this I want to use Chosen

Into gemfile:

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

Into app/assets/javascripts/application.js if use with jQuery

//= require chosen-jquery

Into app/assets/stylesheets/application.css

*= require chosen-compass

No I need to call the .chosen function on the id/class of the form. But I have not gotten it to work at all. Here is my 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 %>

Inspect the tags input box with 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">

Can you please provide me with the correct script to apply .chosen to this form?

Here is my attempt at the jquery to call chosen:

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

Edit: It occurred to me that I could do the css myself if I can figure out how to put the submitted tags inside of their own element such as a ul/li.

just to confirm, your autocomplete field is working fine yes? — kasperite, Jul 10 '16 at 22:40
you want to try this http://stackoverflow.com/questions/12044330/jquery-chosen-plugin-dynamically-populate-list-by-ajax first and see if it helps you? — kasperite, Jul 10 '16 at 22:58
Right, in that case, can you paste the js code to initialize autocomplete functionality?I can then have a crack on it — kasperite, Jul 10 '16 at 23:18
Here is the github for jquery ui autocomplete. https://github.com/bigtunacan/rails-jquery-autocomplete — Timmy Von Heiss, Jul 10 '16 at 23:26
perhaps the part about 'Running custom code on selection' would be helpful — Timmy Von Heiss, Jul 10 '16 at 23:27

score 1 · Accepted Answer · answered Jul 13 '16 at 04:10

1

This is not possible, however an easier solution is to use select2 gem with acts_as_taggable_on gem to create StackOverFlow style tagging system.

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

answered Jul 13 '16 at 04:10

Timmy Von Heiss

2,160
17
39

Combine Jquery UI Autocomplete with Jquery Chosen for a Stackoverflow styling of my tags?

1 Answers1