Jquery UI autocomplete and tag plugin (XOXCO) merging issue

Question

I have been using jquery autocomplete for a while with no problems until now. I want to create a tag system (such as the one in stackoverflow).

For this I am using two plugins:

• Jquery UI (http://jqueryui.com/demos/autocomplete/)
• Xoxco (http://xoxco.com/projects/code/tagsinput/)

I have it running and working using this code:

$('#related_tags').tagsInput({
    autocomplete_url : 'live_search.php',
    autocomplete : {
            minLength: 3,
            delay: 150,
            //DATA AS OPTION??
    },
   'height':'30px',
   'width':'auto',
   'removeWithBackspace' : true,
   'minChars' : 3,
   'maxChars' : 200,
   'placeholderColor' : '#666666'
});

However, I need to change the way livesearch displays the data found (so that it doesn't only display the label). If you are not using these two plugins together (say you just use autocomplete) it's easy, you just do something like this:

$( "#related_tags" ).autocomplete({
        source: 'live_search.php',
        minLength: 3,
        delay: 150
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a href='item.php'>" + item.label + " " + item.surname + "<span style='color:#003399;'>" + item.p_name + "</span></a>" )
            .appendTo(ul);
};

As you can see, I am not displaying just the item's label, I am also displaying the surname and the p_name.

So my question is:

---

How do you use the data rendering function when mergin the autocomplete and the tags plugins together?

---

Since I believe data is not available as an autocomplete option I can't just push it up tere. Any ideas?

P.S: If you do know how to do this using a different plugin than xoxco please tell me anyway. Thanks!

Answer 1

The plugin works with a sort-of hidden input to which the plugin attach the jquery autocomplete.

So you simply have to override the _renderItem to that input input field, like you would do for a simple autocomplete input.

DEMO

---

So if you apply the tagsInput plugin to the following input (from the example on the website's plugin):

<input name="tags" id="tags" value="foo,bar,baz" />​

$('#tags').tagsInput({
    autocomplete_url: 'some url'
});

You end-up with the following generated markup:

<input name="tags" id="tags" value="foo,bar,baz" style="display: none; ">
<div id="tags_tagsinput" class="tagsinput" style="width: 300px; height: 100px; ">
    <span class="tag"><span>foo&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>bar&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><span class="tag"><span>baz&nbsp;&nbsp;</span><a href="#" title="Removing tag">x</a></span><div id="tags_addTag">

    <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"></div>

    <div class="tags_clear"></div>
</div>

See the input field tags_tag. This is the element to which the Autocomplete plugin is attached. You can then simply override the _renderItem:

$('#tags_tag')
    .data('autocomplete')
    ._renderItem = function(ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a href='item.php'>" + item.someProperty + "</a>")
            .appendTo(ul);
};​