在 jQuery UI 自动完成中使用 HTML

Question

在 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"}]

Answer 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")

Answer 2

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

诀窍是：

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

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

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

Answer 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)},

Answer 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。

Answer 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 对象。

希望对大家有所帮助！