Using jquery tokeninput and acts_as_taggable_on

Question

I've implemented the framework outlined in this post: How to use jquery-Tokeninput and Acts-as-taggable-on with some difficulty. This is working insofar as prepopulating with the appropriate theme and ajax search, but when I enter a new tag, it is immediately deleted when the text area loses focus. I'm not sure what I'm doing wrong. Here's some of my relevant code:

User Model (does the tagging):

class User < ActiveRecord::Base
[...]
# tagging
acts_as_tagger

Item Model (accepts a tag):

class Item < ActiveRecord::Base
attr_accessible :title, :tag_list

#tagging functionality
acts_as_taggable_on :tags

Item Controller:

def tags 
@tags = ActsAsTaggableOn::Tag.where("tags.name LIKE ?", "%#{params[:q]}%") 
 respond_to do |format|
  format.json { render :json => @tags.collect{|t| {:id => t.name, :name => t.name }}}
 end
end

On my form partial:

<%= f.input :tag_list, :label => "Tags", :input_html => { :class => "text_field short", "data-pre" => @item.tags.map(&:attributes).to_json }, :hint  => "separate tags by a space"  %>

my routes:

get "items/tags" => "items#tags", :as => :tags
resources :items 

[almost there!!!]

the js on the form [note: the id of the element is assigned dynamically]:

<script type="text/javascript">
$(function() {
  $("#item_tag_list").tokenInput("/art_items/tags", {
    prePopulate:       $("#item_tag_list").data("pre"),
    preventDuplicates: true,
    crossDomain: false,
    theme: "facebook"
  });
});
</script>

Liborio

When you mean "enter a new tag, it is immediately deleted when the text area loses focus", you mean after selecting a tag from the drop down correct? Or you mean when you just wish to create a brand new tag inside of the field, it disappears? – Myogenic

so the field is a text entry field. it will auto populate with existing entries as the user types. I wanted it to add an entry to the "tag" list if it doesn't find one, but this plugin doesn't do that. I'm researching other UX options now. Thanks for checking in! – Liborio

Np, I gave my two cents, just in case you decide to come back to TokenInput in the future. – Myogenic

Answer 1

If you still want to use Jquery TokenInput and add tags there are different ways to do it.

1. This is actually from my same question; the newest answer: How to use jquery-Tokeninput and Acts-as-taggable-on

This could go in your controller.

 def tags
    query = params[:q]
    if query[-1,1] == " "
      query = query.gsub(" ", "")
      Tag.find_or_create_by_name(query)
    end

    #Do the search in memory for better performance

    @tags = ActsAsTaggableOn::Tag.all
    @tags = @tags.select { |v| v.name =~ /#{query}/i }
    respond_to do |format|
      format.json{ render :json => @tags.map(&:attributes) }
    end
  end

This will create the tag, whenever the space bar is hit.

You could then add this search setting in the jquery script:

noResultsText: 'No result, hit space to create a new tag',

It's a little dirty but it works for me.

---

2. Check out this guy's method: https://github.com/vdepizzol/jquery-tokeninput

He made a custom entry ability:

$(function() {
  $("#book_author_tokens").tokenInput("/authors.json", {
    crossDomain: false,
    prePopulate: $("#book_author_tokens").data("pre"),
    theme: "facebook",
    allowCustomEntry: true
  });
});

---

3. Not to sure about this one but it may help: Rails : Using jquery tokeninput (railscast #258) to create new entries

---

4. This one seems legit as well: https://github.com/loopj/jquery-tokeninput/pull/219

I personally like the first one, seems easiest to get and install.

Myogenic