突出显示jQueryUI自动完成

我正在使用jQueryUI1.8.6中的自动完成功能。我想强调匹配结果。但出于某种原因，当我使用正则表达式在匹配字符周围添加“强”标记时，字符串正在转义。所以我看到的是匹配字符的

[strong][/code>，而不是标记的文本

这是我当前使用的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);
    }
});

纯javascript警报（）不显示html。研究使用模态或其他方法。或者像其他人所说的，发布一些特定的输入/输出。
jQuery自动完成源代码就是罪魁祸首。如果查看实际的javascript文件，您会发现在自动完成列表中显示项目的定义：

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( $( "<a></a>" ).text( item.label ) )
        .appendTo( ul );
}

\u renderItem：功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（$（“”）.文本（item.label））
.附录（ul）；
}

您将看到它附加了“.text（item.label）”，这导致html被转义。要解决这个问题，您必须加入一个hack来覆盖这个“_renderItem”方法，将作为纯文本附加标签的行替换为作为html附加标签的行。因此，请按如下方式更新代码：

[{"Description":"Nothing meaningful","ID":3,"Name":"Joe Public‎"}]

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

$（函数（）{
$（“#自动完成输入字段”）.autocomplete({
//把你的代码留在这里，就像以前一样
})
.data（'autocomplete'）。\u renderItem=功能（ul，项目）{
返回$（“
”）
.data（“item.autocomplete”，item）
.append（“”+item.label+“”）
.附录（ul）；
};
});

更新：对于jQuery的版本>=1.10，有一些小的修改：

$（函数（）{
$（“#自动完成输入字段”）.autocomplete({
//把你的代码留在这里，就像以前一样
})
.data（'ui-autocomplete'）。\u renderItem=函数（ul，项）{
返回$（“
”）
.data（“ui自动完成项”，项）
.append（“”+item.label+“”）
.附录（ul）；
};
});
$.extend（$.ui.autocomplete.prototype{
_renderItem：功能（ul，项目）{
var searchMask=this.element.val（）；
var regEx=新的RegExp（搜索掩码，“ig”）；
var replaceMask=“$&”；
var html=item.label.replace（regEx，replaceMask）；
返回$（“
”）
.data（“item.autocomplete”，item）
.append（$（“”）.html（html））
.附录（ul）；
}
});
当ajax数据出现在响应中时，它是什么样子的？我认为他在select中的“警报”只是一个测试，最终被实际运行的代码所取代。问题是jQuery autocomplete插件不支持实际autocompete列表中标签中的html——您必须添加一个hack来实现这一点
$(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 );
    };
});

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