我正在使用以下代码,它正在运行,获取值等,但<b> and <br>
标记显示为文本而不是呈现。我希望item.id
和item.label
位于不同的行,如果可能item.id
粗体:
$( "#predictSearch" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "index.pl",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( $.map( data.items, function( item ) {
return {
label: '<B>' + item.id + '</B><br>' + item.label,
value: item.id
}
}));
}
});
},
minLength: 2
});
答案 0 :(得分:8)
似乎你有一些额外的代码(ajax调用),它可能不需要自动完成。但是,你可以换掉jquery放入的特殊字符来逃避自动完成的“打开”事件中的html。
$("#autocomplete_field").autocomplete({
source: "autocomplete.php",
minLength: 2,
open: function(event, ui){
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, '<');
htmlString = htmlString.replace(/>/g, '>');
$(this).html(htmlString);
});
}
});
完整示例 http://www.jensbits.com/2011/03/03/jquery-autocomplete-with-html-in-dropdown-selection-menu/。
而且,如果您在自动填充中使用perl,http://www.jensbits.com/2011/05/09/jquery-ui-autocomplete-widget-with-perl-and-mysql/就是一个例子。
答案 1 :(得分:7)
使用_renderItem事件。而不是成功事件。
Vroom的实时实施。输入机场,您会注意到左侧的图像。
注意:下面的_renderItem
有一些复杂的计算方法。不要那样做,只要利用这个想法。
$("#myInput")
.autocomplete({
minLength: 0,
delay: 10,
source: function (req, responseFn) {
//Your ajax call here returning only responseFn Array having item.id and item.id
},
select: function (event, ui) {
//action upon selecting an item
return false;
}
})
.data("autocomplete")
._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a><span class='airoplane'>" + (item[0] + (item[2] == "" ? "" : ", " + item[2]) + (item[1] == "" ? "" : " (" + item[1] + ")")).replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + $.ui.autocomplete.escapeRegex(this.term).replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<span class='highlight'>$1</span>") + "</span></a>")
.appendTo(ul);
};
答案 2 :(得分:0)
我们通过在函数末尾添加以下代码来解决这个问题:
$("ul.ui-autocomplete li a").each(function(){
var htmlString = $(this).html().replace(/</g, '<');
htmlString = htmlString.replace(/>/g, '>');
$(this).html(htmlString);
});
此处未触发事件打开回调函数。
答案 3 :(得分:0)
根据iMatoria的回答,我就是这样做的。
var jAuto = $('#purchaser-autocomplete input:text');
jAuto.autocomplete({
source: URL
minLength: 2,
select: function (event, ui) {
//Do Stuff
}
});
jAuto.data("autocomplete")._renderItem = function (ul, item) {
var cssClass = "";
if (item.id.substring(0,1) === 'S') { cssClass = " class='item-staff'"; }
return $("<li" + cssClass + "></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
}
jAuto.focus();