渲染 html 元素存在于 jquery 自动完成数据中答案

【问题标题】：Render html element present inside jquery autocomplete data渲染 html 元素存在于 jquery 自动完成数据中
【发布时间】：2015-06-24 18:21:57
【问题描述】：

我正在使用带有远程数据源的 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/

【问题讨论】：

标签： javascript jquery html css autocomplete

【解决方案1】：

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

instance()

检索自动完成的实例对象。如果元素没有关联的实例，则返回undefined。

_renderItem( ul, item )

控制小部件菜单中每个选项的创建的方法。该方法必须创建一个新的<li> 元素，将其附加到菜单并返回。

代码

$("#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

【讨论】：

【解决方案2】：

您可以使用$.parseHTML(str)

var dropdown = $.parseHTML('ABC <span>XYZ</span>');

检查以下示例：

$('#wrp').html($.parseHTML('This is a &lt;b&gt;Bold text&lt;/b&gt;'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span id="wrp"></span>

【讨论】：