How to add icon to tokenfield autocomplete list?

Question

I'm using jQuery tokenfield for autosuggest. I want to add icons to customList of the results. How to do that.?

I'm using following code,

var applyAutoCompleteToken = (function(){
    $("input.Token").each(function(){
        var tokensData = [];
        var autoSugFieldName = $(this).attr('data-name');
        $('.Record').each(function(index){
            var $ID = $('input[name="'+autoSugFieldName+'['+index+'].ID"][type="hidden"]');
            var $LinkID = $('input[name="'+autoSugFieldName+'['+index+'].LinkID"][type="hidden"]');
            var Obj = {
                    label:$ID.attr('data-name'),
                    value:JSON.stringify({ "ID":$ID.val(), "LinkID":$LinkID.val()   })
            };
            tokensData.push(Obj)
        });
        $(this).tokenfield({
            tokens : tokensData,
            createTokensOnBlur:false,
            allowEditing:false,
            allowPasting:false,
            autocomplete: {
                minLength:2,
                scrollHeight:20,
                focus: function (event, ui) {
                    event.preventDefault();
                    $(this).val(ui.item.label);
                },
                source: function(query,process) {
                unbindGlobalAjaxLoader();
                $(this.element).closest('div.validate').append('<i class="fa fa-spinner fa-pulse"></i>');
                    var excludeIds =''
                        $('.Record').each(function(index){
                            var Id = $('input[name^="'+autoSugFieldName+'['+index+'].ID"][type="hidden"]').val();
                            if(excludeIds == "")
                                excludeIds += Id;
                            else
                                excludeIds += "," + Id;
                        });
                    return $.get(contextPath + constants.urls.suggest + constants.urls.params.startParams + constants.urls.params.pubName + encodeURIComponent(query.term) + constants.urls.params.queryparam + excludeIds,function(data){
                    utils.bindGlobalAjaxLoader();
                    $('body').find('i.fa-spinner').remove();
                        data=JSON.parse(data)
                        var list =  data.SuggDetail;
                        var customList = [];
                        $.each(list,function(key,value){
                            if(value.ID != undefined && value.ID != ""){
                                var Obj = {
                                        label: value.Name,
                                        value:JSON.stringify({ "ID":value.ID, "LinkID":value.LinkID })
                                };
                                customPubList.push(Obj);
                            }
                        });
                        return process(customList);
                    }).fail(function() {
                        $('body').find('i.fa-spinner').remove();
                    });
                },

                // source: customList,
                delay: 100
            },
            showAutocompleteOnFocus: false
        }).on('tokenfield:createtoken',function(e){
            var $input = $(e.target); 
            try{
                $.parseJSON(e.attrs.value)
            }catch(e){
                return false;
            }
        })
        //Remove hidden fields on editing the token 
        .on('tokenfield:createdtoken',function(e){
            var fieldName = $(this).attr('data-name');
            var $inputAct = $(this);
            var tokens = $(this).tokenfield('getTokens');
            createdTokenUtility(fieldName, $inputAct, tokens);
        })
        //Remove hidden fields on editing the token 
        .on('tokenfield:removedtoken',function(){
            var fieldName = $(this).attr('data-name');
            var $inputAct = $(this);
            var tokens = $(this).tokenfield('getTokens');
            createdTokenUtility(fieldName, $inputAct, tokens);
        });
    });
});

I'm using jQuery UI and bootstrap tokenfield javascript library for it.

I've tried adding label: value.Name + <i class='fa fa-history'></i> in the code but it doesn't give correct result. On UI, while searching the list populates like this with html tag as text,

• <i class='fa fa-history'></i> First Name A
• <i class='fa fa-history'></i> First Name B
• <i class='fa fa-history'></i> First Name C

But after selecting from list the token field it gets correct in input field icon with name, i.e., without html tag as text.

Answer 1

I've figured out the solution using google. It worked for me after I added create property after delay: 100 using this code,

create: function () {
                    $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                    var html = JSON.parse(item.value).LinkID != undefined && JSON.parse(item.value).LinkID != "" ? "<i class='fa fa-history'></i>" : "";
                      return $('<li>')
                              .append(html + item.label)
                              .appendTo(ul);
                    };
                }