呈现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 条评论
登录 后参与评论

相关文章

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

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

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

过滤自动完成数据源

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

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

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

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

输入中的自动完成数据

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

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

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

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

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

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

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

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

jQuery UI,HTML自动完成

清除自动完成数据jQuery

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

jQuery自动完成数据

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

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

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

JQuery 自动完成不会呈现结果

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

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

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

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