Using custom HTML as result of Tag-it Autocomplete
autocomplete, html, tag-it
Solution
This works for me
$('ul').find("input").data("uiAutocomplete")._renderItem = function (ul, item) { };
Problem
Autocomplete property of Tagit Jquery plugin was written as follwing : ``` autocomplete: { source: function( request, response ) { $.ajax({ url: baseURL, dataType: "json", data: { query:request.term }, success: function( data ) { response( $.map( data, function( item ) { return { label: item.label + "<br />" +item.description, value: item.label } })); } }); } ``` All work fine except returning to line as you see that `<br>` is embedded between `Label` and `description` of item. The problem that Tag-it interprets `<br>` such as plain text . i read here : If you're using a custom jQuery UI build, it must contain the Core, Widget, Position, and Autocomplete components. The Effects Core with "Blind" and "Highlight" Effect components are optional, but used if available. And i don't knwon how to set custom HTML UPDATE : Known that if it is autocomplete plugin , we can use : ``` $('ul').autocomplete({...}).data("autocomplete")._renderItem = function (ul, item) { return $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.label +"<br>"+item.description+ "</a>") .appendTo(ul); }; ``` However, when i applay `.data("autocomplete")._renderItem` at tag-it plugin , i get error . ``` $('ul').tagit({autocomplete:{/*....*/}}).data("autocomplete")._renderItem=fn /*...*/ ```