呈现jQuery自动完成数据中存在的html元素

阿金基亚·皮萨尔(Ajinkya Pisal)

我正在使用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/

萨帕尔

您可以使用“自定义显示”使用.autocomplete("instance")._renderItem方法覆盖它

实例()

检索自动完成的实例对象。如果元素没有关联的实例,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);
};

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery自动完成数据

清除自动完成数据jQuery

输入中的自动完成数据

如何过滤具有2万个元素的数组中的自动完成数据?

jQuery自动完成呈现未过滤的数据

为什么该网站返回包装在jQuery标签中的自动完成数据?

jQuery UI使用Ajax来自动完成数据

自动完成数据源以呈现 ListItem 组件 - [material-ui]

如何使用 Ajax 和 Laravel 将自动完成数据提取到他们受尊重的元素中?

Jquery-UI 自动完成自定义数据 - 图像不会在自动完成的下拉列表中呈现

过滤自动完成数据源

将jQuery自动完成数据附加到textarea内容,而不是覆盖它

将Google Apps脚本数组应用于HTML表单自动完成数据列表

使用select2:opening调用中的值作为ajax自动完成数据参数的输入

如何在组件中绑定角材料自动完成数据

在自动完成的 jQuery UI 中显示数据

来自远程服务器的 NativeScript 自动完成数据

如何获取正确格式的自动完成数据

如何填充materialize.css芯片自动完成数据?

延迟加载自动完成数据列表 angularjs

jQuery ui自动完成数组应以text()形式出现

jQuery来自字符串的对象的自动完成数组

JQuery 自动完成不会呈现结果

您如何在Django中自动完成数据库中一种表单的更新信息

当存在html 5占位符属性时,jQuery UI自动完成功能会触发Internet Explorer中的字段焦点

从AngularJS完成数据加载后获取html正文高度

jQuery UI,HTML自动完成

jQuery自动完成,使用pHp json中的数据填充

一旦ngIf完成呈现html元素,如何在ngIf中触发指令?