如何将图标添加到令牌字段自动完成列表？答案

【问题标题】：How to add icon to tokenfield autocomplete list?如何将图标添加到令牌字段自动完成列表？
【发布时间】：2017-06-28 08:50:55
【问题描述】：

我正在使用 jQuery 令牌字段进行自动建议。我想将图标添加到结果的 customList 中。该怎么做？

我正在使用以下代码，

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);
        });
    });
});

我正在使用 jQuery UI 和 bootstrap tokenfield javascript 库。

我尝试在代码中添加label: value.Name + ，但没有给出正确的结果。在 UI 上，搜索列表时会像这样使用 html 标记作为文本填充，

 First Name A
 First Name B
 First Name C

但是在从列表中选择令牌字段后，它会在输入字段图标中正确显示名称，即没有 html 标记作为文本。

【问题讨论】：

标签： jquery jquery-ui-autocomplete bootstrap-tokenfield

【解决方案1】：

我已经使用谷歌找到了解决方案。在我使用此代码在delay: 100 之后添加创建属性后，它对我有用，

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);
                    };
                }

【讨论】：