UI-AutoComplete Mark-up

[lordcatalien]

I know this is a question about the ui-widget instead of tag-it, but I was hoping you could provide brief documentation on how to add a span element (or any mark-up changes) to the

list items that show in the autocomplete list. I love the way you code and would love to implement your best practices and advice to do this.

Ideally, I'd love to be able to pass an object to/from auto-complete to update the Tag-It tags (e.g., {typed: "yesterday", display: "Shared: Yesterday", icon: "date.png"}).

Lastly, is there a way to focus the input on document ready? (e.g., $("#search input").focus();)

[deanmeyers]

        //DeanM most override tagit render of the associate field to include the image in autocomplete
        monkeyPatchAutocomplete();

function monkeyPatchAutocomplete() { $.ui.autocomplete.prototype._renderItem = function (ul, item) { var regexp = new RegExp(this.term, 'gi'); //var regexp = new RegExp('(>[^<.])(' + this.term + ')([^<.])','gi'); var highlightedVal = item.label.replace(regexp, "" + this.term + ""); return $("

") .data("item.autocomplete", item) //.append("" + highlightedVal + "") .append("

" + highlightedVal + "   " + item.extra + "

") .appendTo(ul); }; }