javascript - 渲染存在于 jquery 自动完成数据中的 html 元素

Question

我正在使用带有远程数据源的 jQuery 自动完成功能。远程数据包含 HTML 标记。样本数据的形式:

[
  "ABC <span>XYZ</span>",
  "PQR <span>LMN</span>",

];

自动完成下拉列表包含如下输出

ABC <span>XYZ</span>
PQR <span>LMN</span>

我希望 HTML 标签得到渲染和下拉以显示类似的输出

ABC XYZ
PQR LMN

http://jsfiddle.net/ac112jmx/2/

Answer 1

您可以使用 Custom Display 覆盖它使用 .autocomplete("instance")._renderItem方法。

instance()

Retrieves the autocomplete's instance object. If the element does not have an associated instance, undefined is returned.

_renderItem( ul, item )

Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it.

代码

$("#tags").autocomplete({
    source: availableTags,
    select: function (event, ui) {
        console.log(ui.item);
        $("#tags").val(ui.item.label);
        return false;
    }
}).autocomplete( "instance" )._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<a>" + item.label + "</a>")
        .appendTo(ul);
};

DEMO