Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The plugin works with a sort-of hidden input to which the plugin attach the jquery autocomplete.</p> <p>So you simply have to override the <code>_renderItem</code> to that input input field, like you would do for a simple autocomplete input.</p> <p><strong><a href="http://jsfiddle.net/didierg/tp2e2/" rel="nofollow">DEMO</a></strong></p> <hr> <p>So if you apply the tagsInput plugin to the following input (from the example on the website's plugin):</p> <pre><code>&lt;input name="tags" id="tags" value="foo,bar,baz" /&gt;​ $('#tags').tagsInput({ autocomplete_url: 'some url' }); </code></pre> <p>You end-up with the following generated markup:</p> <pre><code>&lt;input name="tags" id="tags" value="foo,bar,baz" style="display: none; "&gt; &lt;div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; "&gt; &lt;span class="tag"&gt;&lt;span&gt;foo&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;a href="#" title="Removing tag"&gt;x&lt;/a&gt;&lt;/span&gt;&lt;span class="tag"&gt;&lt;span&gt;bar&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;a href="#" title="Removing tag"&gt;x&lt;/a&gt;&lt;/span&gt;&lt;span class="tag"&gt;&lt;span&gt;baz&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;a href="#" title="Removing tag"&gt;x&lt;/a&gt;&lt;/span&gt;&lt;div id="tags_addTag"&gt; &lt;input id="tags_tag" value="" data-default="add a tag" style="color: rgb(102, 102, 102); width: 80px; " class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"&gt;&lt;/div&gt; &lt;div class="tags_clear"&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>See the input field <strong><code>tags_tag</code></strong>. This is the element to which the Autocomplete plugin is attached. You can then simply override the <code>_renderItem</code>:</p> <pre><code>$('#tags_tag') .data('autocomplete') ._renderItem = function(ul, item) { return $("&lt;li&gt;&lt;/li&gt;") .data("item.autocomplete", item) .append("&lt;a href='item.php'&gt;" + item.someProperty + "&lt;/a&gt;") .appendTo(ul); };​ </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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