Question

我有一个简单的jQuery UI自动完成工作正常。但是，当我将HTML标签添加到标签输出字符串时，它们实际打印出来。我已将它们替换为上标html实体²和许多其他标签也可以打印......

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

显示器：

enter image description here

有没有人见过这种情况？不确定它是自动完成，字符串的构建方式还是响应（）......

更新：

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

$('#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-prone（这是默认版本使用.text()的原因）。除非您对服务器验证有100％的信心，否则您可能希望手动转义Ajax结果：

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

自动完成列表项打印HTML

1 个答案: