Using custom HTML as result of Tag-it Autocomplete

Question

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 .

enter image description here

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 /*...*/

score 4 · Accepted Answer · answered Mar 27 '14 at 11:41

4

This works for me

$('ul').find("input").data("uiAutocomplete")._renderItem = function (ul, item) { };

answered Mar 27 '14 at 11:41

user3214782

56
2

quick question about this method, how I can bind again the old tag it events ? – OrcusZ Oct 26 '16 at 11:09
1

- 3 years ago...so , i cannot remember now.. However, I recommend to open new question & explain this sub-issue. @OrcusZ . – Abdennour TOUMI Oct 26 '16 at 11:11

score 0 · Answer 2 · answered Dec 26 '14 at 15:44

This is how I ve done it (I wanted to place an image tag)... add the following (or as per your need) inside autocomplete as an option...

open: function( event, ui ) {
    //alert(ui);
    $('ul.tagit-autocomplete').find("li").each(function(index){
    var cur_html = $(this).html();

    var new_html = cur_html.replace('&lt;img', '<img');
    var new_html = new_html.replace('/&gt;', '/>');

    $(this).html(new_html);
    //console.log( index + ": " + $( this ).html() );
    });
    return true;
}

Using custom HTML as result of Tag-it Autocomplete

2 Answers2