Databases
StackOverflow2013
Postsdbo
POHow to use jquery-Tokeninput and Acts-as-taggable-on
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use jquery-Tokeninput and Acts-as-taggable-on
    text
    copied!<p>This is how you use autocomplete with <a href="http://loopj.com/jquery-tokeninput/" rel="noreferrer">jQuery Tokeninput</a> and <a href="https://github.com/mbleigh/acts-as-taggable-on" rel="noreferrer">ActsAsTaggableOn</a>. </p> <p>In my situation i am using a nested form but it shouldnt matter. Everything below is code that works.</p> <h2>Code</h2> <p>Product Model:</p> <pre><code>attr_accessible :tag_list # i am using the regular :tag_list acts_as_taggable_on :tags # Tagging products </code></pre> <p>Products Controller:</p> <pre><code> #1. Define the tags path #2. Searches ActsAsTaggable::Tag Model look for :name in the created table. #3. it finds the tags.json path and whats on my form. #4. it is detecting the attribute which is :name for your tags. def tags @tags = ActsAsTaggableOn::Tag.where("tags.name LIKE ?", "%#{params[:q]}%") respond_to do |format| format.json { render :json =&gt; @tags.map{|t| {:id =&gt; t.name, :name =&gt; t.name }}} end end </code></pre> <p>Routes:</p> <pre><code># It has to find the tags.json or in my case /products/tags.json get "products/tags" =&gt; "products#tags", :as =&gt; :tags </code></pre> <p>Application.js:</p> <pre><code>$(function() { $("#product_tags").tokenInput("/products/tags.json", { prePopulate: $("#product_tags").data("pre"), preventDuplicates: true, noResultsText: "No results, needs to be created.", animateDropdown: false }); }); </code></pre> <p>Form:</p> <pre><code>&lt;%= p.text_field :tag_list, :id =&gt; "product_tags", "data-pre" =&gt; @product.tags.map(&amp;:attributes).to_json %&gt; </code></pre> <hr> <h2>Issue 1(SOLVED)</h2> <hr> <p>Must have the line: </p> <pre><code>format.json { render :json =&gt; @tags.collect{|t| {:id =&gt; t.name, :name =&gt; t.name }}} </code></pre> <p>Note - You can use <code>@tags.map</code> here as well and you dont have to change the form either.</p> <p>Below are the 2 issues on why you needed to do this:</p> <p>I have the following <code>Tag</code>: <code>{"id":1,"name":"Food"}</code>. When I save a <code>Product</code>, tagged <code>"Food"</code>, it should save as <code>ID: 1</code> when it searches and finds the name <code>"Food"</code>. Currently, it saves a new <code>Tag</code> with a new ID that references the <code>"Food"</code> ID, i.e. <code>{"id":19,"name":"1"}</code>. Instead, it should be finding the ID, showing the name, and doing a <code>find_or_create_by</code> so it doesn't create a new <code>Tag</code>.</p> <hr> <h2>Issue 2(SOLVED)</h2> <hr> <p>When I go to <code>products/show</code> to see the tags by doing <code>&lt;%= @product.tag_list %&gt;</code>. The name appears as "<strong>Tags: 1</strong>", when it really should be "<strong>Tags: Food</strong>". </p> <p>How can I fix these issues?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload