突出显示jQuery UI自动完成
我在jQuery UI 1.8.6中使用自动完成function。 我想强调匹配的结果。 但出于某种原因，当我使用正则表达式在匹配字符周围添加“强”标签时，字符串将被转义。 所以我看到[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, "$1"), 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"}]
jQuery自动完成源代码是罪魁祸首。 如果你查看实际的javascript文件，你会发现这个定义在自动完成列表中显示项目：
_renderItem: function( ul, item) { return $( "" ) .data( "item.autocomplete", item ) .append( $( "" ).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 $( "" ) .data( "item.autocomplete", item ) .append( '' + item.label + '' ) .appendTo( ul ); }; });
更新：对于jQuery的版本> = 1.10，有一些小的修改：
$(function () { $("#autocompleteinputfield").autocomplete({ // leave your code inside here exactly like it was }) .data('ui-autocomplete')._renderItem = function( ul, item ) { return $( "" ) .data( "ui-autocomplete-item", item ) .append( '' + item.label + '' ) .appendTo( ul ); }; });
$.extend($.ui.autocomplete.prototype, { _renderItem: function (ul, item) { var searchMask = this.element.val(); var regEx = new RegExp(searchMask, "ig"); var replaceMask = "$&"; var html = item.label.replace(regEx, replaceMask); return $("") .data("item.autocomplete", item) .append($("").html(html)) .appendTo(ul); } });
普通的javascript alert（）不显示html。 考虑使用模态或其他东西。 或者像其他人说的那样，发布一些特定的输入/输出。