How to use jquery tokeninput in Rails?

Question

I'm trying to add a tokeninput jquery field in a form in my app that allows users to post status updates. I want users to be able to attach works (a separate model) to the status update. I'm using the act_as_taggable_on gem and my query specifies the tags context "works". However, the field will not load any search results.

I actually have a second tokeninput field that allows users to attach tags to the status update, much like this website uses tags to attach to this issue ticket. It works fine! I'm trying to mirror that functionality to specify the context to search the works model and I'm struggling with the implementation.

Any ideas? Your time and assistance would be greatly appreciated! Here is the relevant code:

post model

attr_accessible :content, :tag_list, :work_list

acts_as_taggable_on :tags
acts_as_taggable_on :works

Post controller (updated)

def work_list
 query = params[:q]  
 @work_list = ActsAsTaggableOn::Tag.includes(:taggings).where("taggings.context = 'works'").where("tags.name ILIKE ?", "%#{params[:q].downcase.to_s}%").all
 @work_list = @work_list.select { |v| v.name =~ /#{query}/i }
  respond_to do |format|
    format.json { render :json => @work_list.map{|w| {:id => w.name, :name => w.name }}}
  end
end


def tags 
    query = params[:q]
    if query[-1,1] == " "
      query = query.gsub(" ", "")
      ActsAsTaggableOn::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{|t| {:id => t.name, :name => t.name }}}
    end
  end

form

<%= f.text_field :tag_list, :id => "post_work_list",  "data-pre" => @post.work_list.map(&:attributes).to_json %>

javascript

$ ->
  $("#post_tags").tokenInput "/posts/tags.json",
    prePopulate: $("#post_tags").data("pre")
    preventDuplicates: true
    noResultsText: "No results, press space key to create a new tag."
    animateDropdown: false

$ ->
  $("#post_work_list").tokenInput "/posts/work_list.json",
    prePopulate: $("#post_work_list").data("pre")
    preventDuplicates: true
    noResultsText: "No results"
    animateDropdown: false

routes

get "posts/tags" => "posts#tags", :as => :tags
get "posts/work_list" => "posts#work_list", :as => :work_list

Thanks!

EDIT: I cleaned up this question and the updated all of the code. I also started a conversation on enginhere.com which also has some other troubleshooting from other engineers:

http://bit.ly/179kiqH

Feel free to help by continuing the conversation on the above enginhere.com conversation and then posting the final, official answer here for the bounty!

Thanks again!

Answer 1

If you are using acts_as_taggable_on gem it's easier way than in railscast.

Model (Post):

acts_as_taggable_on :works

View (form):

= f.text_field :work_list, "data-pre" => f.object.work_list.sort.collect {|t| {id: t, name: t } }.to_json

JS:

$ ->
  $("#post_work_list").tokenInput "/posts/works.json",
    preventDuplicates: true,
    animateDropdown: false

Answer 2

Amazing post answers to any questions by this topic!

http://bloginius.com/blog/2013/12/31/how-integrate-acts-as-taggable-on-with-jquery-token-input-with-rails-3/