我正在使用jQuery tokenfield进行自动提示。我想在结果的 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 + <i class='fa fa-history'></i>
,但它没有给出正确的结果。在UI上,搜索列表时填充这样的html标记为文本,
<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
但是从列表中选择令牌字段后,它在带有名称的输入字段图标中变得正确,即没有html标签作为文本。
答案 0 :(得分:0)
我已经使用谷歌找出了解决方案。在我使用此代码
之后在delay: 100
之后添加了create属性后,它对我有用
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);
};
}