在 jQuery UI 自动完成中使用 HTML

Posted 2023-03-05

【中文标题】在 jQuery UI 自动完成中使用 HTML

【英文标题】：Using HTML in jQuery UI autocomplete

【发布时间】：2011-03-30 02:48:09

【问题描述】：

在 jQuery UI 1.8.4 之前，我可以在我构建的 JSON 数组中使用 html 以使用自动完成功能。

我能够做类似的事情：

$row_array['label'] = '<span style="color: red; font-family: courier;">User, Name</span>';

这将在下拉菜单中显示为红色文本。

从 1.8.4 开始，这不起作用。我找到了 http://dev.jqueryui.com/ticket/5275，它告诉我使用自定义 HTML 示例 here，但我没有运气。

如何让 HTML 显示在建议中？

我的 jQuery 是：

<script type="text/javascript">
    $(function() 
        $("#findUserIdDisplay").autocomplete(
            source: "ui_autocomplete_users_withuname.php",
            minLength: 2,
            select: function(event, ui) 
                $('#findUserId').val(ui.item.id);
            
        );
    );
</script>

我的 JSON 数组包含如下 HTML：

["label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"]

【问题讨论】：

我也想回答这个问题，我也遇到了同样的问题。

【参考方案1】：

将此添加到您的代码中：

).data( "autocomplete" )._renderItem = function( ul, item ) 
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>"+ item.label + "</a>" ) 
                .appendTo( ul );
        ;

所以你的代码变成了：

<script type="text/javascript">
 $(function () 
     $("#findUserIdDisplay").autocomplete(
         source: "ui_autocomplete_users_withuname.php",
         minLength: 2,
         select: function (event, ui) 
             $('#findUserId').val(ui.item.id);
             return false;
         
     ).data("ui-autocomplete")._renderItem = function (ul, item) 
         return $("<li></li>")
             .data("item.autocomplete", item)
             .append("<a>" + item.label + "</a>")
             .appendTo(ul);
     ;
 );
</script>

注意：在旧版本的 jQueryUI 上使用 .data("autocomplete")" 而不是 .data("ui-autocomplete")

【讨论】：

_renderItem 是做什么的？那是转换 HTML 吗？

forum.jquery.com/topic/using-html-in-autocomplete 见第二个帖子，它描述了一切。

在新版本的 jQuery ui 上使用 .data("ui-autocomplete") 而不是 data("autocomplete")

如果您删除<a>，您将无法单击/滚动该项目。

你是个救命的人。我想检查你的答案！ :)

【参考方案2】：

这也记录在 jquery-ui 自动完成文档中： http://api.jqueryui.com/autocomplete/#option-source

诀窍是：

Use this jQuery UI extension 然后在自动完成选项中通过autocomplete( html:true); 现在您可以在 JSON 输出的“标签”字段中传递 html <div>sample</div> 以进行自动完成。

如果你不知道如何将插件添加到 JQuery UI 那么：

将插件（Scott González 的 html 扩展名）保存在 js 文件中或下载 js 文件。 您已经在 html 页面（或 jquery-ui js 文件）中添加了 jquery-ui 自动完成脚本。在自动完成 javascript 文件之后添加这个插件脚本。

【参考方案3】：

不推荐使用此解决方案，但您可以只编辑源文件 jquery.ui.autocomplete.js (v1.10.4)

原文：

_renderItem:function(t,i)return e("<li>").append(e("<a>").text(i.label)).appendTo(t),

固定：

_renderItem:function(t,i)return e("<li>").append(e("<a>").html(i.label)).appendTo(t),

【参考方案4】：

我遇到了同样的问题，但我更喜欢为我的 option('source') 使用静态选项数组来提高性能。如果您尝试使用此解决方案，您会发现 jQuery 也会搜索整个标签。

EG 如果你提供：

["label":"<span style="color: red";>User, Name</span>","value":"User, Name","id":"10"]

然后键入“span”将匹配两个结果，使其搜索值仅覆盖 $.ui.autocomplete.filter 函数：

$.ui.autocomplete.filter = function(a,b)var g=new RegExp($.ui.autocomplete.escapeRegex(b),"i");return $.grep(a,function(c)return g.test(c.value||c))

您可以将最后一个参数c.value 编辑为您想要的任何内容，例如c.id || c.label || c.value 将允许您搜索标签、值或 id。

您可以根据需要为自动完成的源参数提供任意数量的键/值。

PS：原来的参数是c.label||c.value||c。

【讨论】：

仅供参考：如果您使用 AJAX 作为源，则不需要此解决方案，因为您负责使用传入的搜索“术语”进行过滤

【参考方案5】：

我遇到了 Clarence 提到的问题。我需要提供HTML 以使样式和图像看起来更漂亮。这导致输入匹配所有元素的“div”。

但是，我的值只是一个 ID 号，所以我不能让搜索仅以此为依据。我需要搜索来查找多个值，而不仅仅是 ID 号。

我的解决方案是添加一个仅包含搜索值的新字段，并在 jQuery UI 文件中检查该字段。这就是我所做的：

（这是在 jQuery UI 1.9.2 上；在其他版本上可能相同。）

在第 6008 行编辑过滤器函数：

filter: function (array, term) 
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), "i");
        return $.grep(array, function (value) 
            if (value.searchonly == null)
                return matcher.test(value.label || value.value || value);
            else
                return matcher.test(value.searchonly);
        );
    

我添加了对“value.searchonly”字段的检查。如果存在，则仅使用该字段。如果不存在，则正常工作。

然后您可以像以前一样使用自动完成功能，除了您可以将“searchonly”键添加到您的 JSON 对象。

希望对大家有所帮助！

【讨论】：

@PeterMortensen 我很高兴您编辑它以包含指向 HTML 的***链接。