Problem with jquery UI autocomplete pooling and tag (XOXCO)

Question

I used jquery autocompletion for a while without any problems so far. I want to create a tag system (for example, one from stackoverflow).

For this, I use two plugins:

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

It works for me and works 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 the data is displayed in real time (so that it displays more than just a shortcut). If you don't use these two plugins together (let's say you just use autocomplete), it's simple, 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 do not show only the label of the element, I also show the last name and first name p_.

So my question is:

---

?

---

, , . ?

P.S: , , , xoxco, , . !

Answer 1

, jquery.

, _renderItem , .

DEMO

---

, tagsInput ( ):

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

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

:

<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>

. tags_tag. , Autocomplete. _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);
};​