我在jQuery UI 1.8.6中使用自动完成功能。我想强调匹配的结果。但由于某种原因,当我使用正则表达式在匹配的字符周围添加“强”标签时,字符串将被转义。所以我看到[strong]matching chars[/strong]
,而不是标记文字。
这是我目前正在使用的javascript:
$("#autocompleteinputfield").autocomplete({
source: function (request, response) {
$.ajax({
url: "someservice",
type: "GET",
dataType: "json",
data: { filter: request.term, maxResults: 10 },
success: function (data) {
response($.map(data, function (item) {
// return { label: item.ID + ' - ' + item.Name, id: item.ID, value: item.Name }
var regex = new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + request.term.replace(/ ([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/ gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi");
return {
label: (item.ID + ' - ' + item.Name).replace(regex, "<strong>$1</strong>"),
id: item.ID,
value: item.Name
}
}))
}
});
},
select: function (event, ui) {
alert(ui.item ? ("You picked '" + ui.item.label + "' with an ID of " + ui.item.id)
: "Nothing selected, input was " + this.value);
}
});
更新:
“输入”是在文本框中输入的文本(在本例中为[input type="text" id="autocompleteinputfield" /]
输出如下:
[{"Description":"Nothing meaningful","ID":3,"Name":"Joe Public"}]
答案 0 :(得分:15)
jQuery自动完成源代码是罪魁祸首。如果你查看实际的javascript文件,你会发现这个定义在自动完成列表中显示项目:
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" ).text( item.label ) )
.appendTo( ul );
}
你会看到它附加了“.text(item.label)”,这会导致html被转义。要解决这个问题,你必须放弃一个黑客来覆盖这个“_renderItem”方法,将标签作为纯文本附加的行替换为将标签附加为html的行。所以更新你的代码:
$(function () {
$("#autocompleteinputfield").autocomplete({
// leave your code inside here exactly like it was
})
.data('autocomplete')._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( '<a>' + item.label + '</a>' )
.appendTo( ul );
};
});
更新:对于jQuery的版本&gt; = 1.10,有一些小的修改:
$(function () {
$("#autocompleteinputfield").autocomplete({
// leave your code inside here exactly like it was
})
.data('ui-autocomplete')._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append( '<a>' + item.label + '</a>' )
.appendTo( ul );
};
});
答案 1 :(得分:8)
$.extend($.ui.autocomplete.prototype, {
_renderItem: function (ul, item) {
var searchMask = this.element.val();
var regEx = new RegExp(searchMask, "ig");
var replaceMask = "<b style=\"color:green;\">$&</b>";
var html = item.label.replace(regEx, replaceMask);
return $("<li></li>")
.data("item.autocomplete", item)
.append($("<a></a>").html(html))
.appendTo(ul);
}
});
答案 2 :(得分:0)
普通的javascript alert()不显示html。考虑使用模态或其他东西。或者像其他人说的那样,发布一些特定的输入/输出。