CODEWITHSUNDEEP
ruby-on-railssimple-formjquery-chosentagging
Maryan Yurchylyak
Maryan Yurchylyak

Reputation: 11

Rails Tagging with autocomplete

I'm trying to complete this article about tagging https://medium.com/@sherzelsmith/add-a-filtering-multiple-tag-system-with-autocomplete-to-your-rails-model-in-rails-5-1bf88cd53e9
My problem is that I need to make creation of non-existing possible, but for now it clears the field if you are trying to fill it with new tag (non-existing at the moment) so no new tag can be created by this method. The author of this article deployed a demo of this feature, so I'll leave it here for better understanding of what I'm talking about. https://blogit-ss.herokuapp.com/posts/new

<div class = 'col-md-8 offset-2'>
  <h1 class = "text-center">New Tag</h1>
  <%= simple_form_for @product, url: product_path(@product) do |f| %>
    <p><small>Tags: <%= raw @product.tags.map(&:name).map { |t| link_to t, tag_path(t) }.join(', ') %></small</p>
    <p><%= f.input :tag_ids, collection: Tag.order(:name), include_blank: true, input_html: { multiple: true, class: 'chosen-select' } %></p>
    <%= f.submit "Next", class: 'btn btn-primary' %>
  <% end %>
</div>

So maybe someone here have any suggestions of how to avoid 'no results match' and let the form to accept new tags? Like it works here, on Stackoverflow.
The only way that was the nearest to my goal - text_field in form_for:

<%= f.text_field :tag_list, collection: Tag.order(:name), include_blank: true, input_html: { multiple: true, class: 'chosen-select' } %>

which allows typing tag names separated with commas, but without autocomplete.

Upvotes: 1

Views: 1215

Answers (2)

Maryan Yurchylyak
Maryan Yurchylyak

Reputation: 11

So the best solution for this one is covered in Jad Chahine's answer to similar problem
https://stackoverflow.com/a/36350998/10253611


Simply adding bootstrap-tagsinput library to my project and passing data-role to my input field (although for now it is without autocomplete, but good for start):

<div class = 'col-md-8 offset-2'>
  <h1 class = 'text-center'>New Blog Post</h1>
  <%= simple_form_for @product, url: tag_link_product_url(@product), remote: true do |f| %>
  <p><small id='tag_links'>Tags: <%= raw @product.tags.order(:name).map { |tag| link_to tag.name, products_path(q: { tags_id_eq: tag.id }) }.join(', ') %></small</p>
  <%= f.text_field :tag_list, collection: Tag.order(:name), 'data-role': 'tagsinput', input_html: { multiple: true, class: 'chosen-select' } %>
  <%= f.submit "Next", class: 'btn btn-primary' %>
 <% end %>
</div>

Upvotes: 0

Mohammad Shahnawaz
Mohammad Shahnawaz

Reputation: 876

Hi I have added another taggable drop down This is the working link

Working link for add customizable tag

And below is the link for code on GitHub

Github link for the customizable drop down code

Upvotes: 0

Related Questions