打印 HTML 的自动完成列表项

Question

我有一个简单的 jQuery UI 自动完成功能，效果很好。但是，当我将 HTML 标签添加到标签输出字符串时，它们实际上会打印出来。我用上标 html entities ² 和许多其他也打印的标签替换了它们...

$('#mainSearch').autocomplete({
    appendTo: ".inputWrapper",
    minLength: 3,
    source: function (request, response) {
        var customer = new Array();
        $.ajax({
            async: false,
            cache: false,
            type: "POST",
            url: "http://localhost/EmployeeDirectory/GetEmployees",
            data: { "filterText": request.term },
            error: function (data) { console.log('Error!'); },
            success: function (data) {
                for (var i = 0; i < data.length ; i++) {
                    customer[i] = {

                        label: data[i].FullName + "<a href='#'>" + data[i].Region + '/' + data[i].District + "</a>" + data[i].Center,

                        Id: data[i].UserID,
                        encryptID: data[i].UserIDEncryted
                    };
                }
            }
        });
        response(customer);
    },
});

显示：

有人见过这种情况吗？不确定它是自动完成、字符串的构建方式还是 response()...

更新：

这是我最终使用的最终代码。

$('#mainSearch').autocomplete({
    appendTo: ".inputWrapper",
    minLength: 3,
    source: function (request, response) {
        $.ajax({
            async: false,
            cache: false,
            type: "POST",
            url: "localhost/",
            data: { "filterText": request.term },
            error: function (data) { console.log('Error!'); },
            success: function (data) {
                response(data);
            }
        });
    },
    focus: function (event, ui) {
        event.preventDefault();
        $(this).val(ui.item.FirstName + ' ' + ui.item.LastName);
    },
    select: function (event, ui) {
        console.log('object: ' + JSON.stringify(ui, null, 4));
        document.location.href = "/eCard/?uid=" + ui.item.UserIDEncrypted;
    }
}).autocomplete("instance")._renderItem = function (ul, item) {
    return $("<li>")
      .append(item.FullName + '<br /><sup>' + item.Region + '/' + item.District + ' ' + item.Center + '</sup>')
      .appendTo(ul);
};

Answer 1

发生这种情况是因为自动完成小部件使用 .text() 填充其项目，这会转义所有 html 内部标签。您可以覆盖 _renderItem 并使用 .html() 来填充项目：

$.widget("my.customAutocomplete", $.ui.autocomplete, {
    _renderItem: function( ul, item ) {
        return $( "<li>" ).html( item.label ).appendTo( ul );
    }
}
$('#mainSearch').customAutocomplete({ // etc.

请记住，这可能是 xss 倾向的（这就是默认版本使用 .text() 的原因）。除非您对服务器验证有 100% 的信心，否则您可能希望手动转义 Ajax 结果：

label: $("<p>").text(data[i].FullName).text() +
       "<a href='#'>" +
       $("<p>").text(data[i].Region).text() + /* etc. */

打印 HTML 的自动完成列表项

autocomplete list items printing HTML out

string

jquery-ui

autocomplete

html-entities