在jQuery UI自动完成中使用HTML

Question

前 jQuery UI 1.8.4我可以使用 html 在JSON阵列中，我构建了与自动完成的合作。

我能够做类似的事情：

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

这将在下拉列表中显示为红色文字。

从1.8.4起，无效。我发现 http://dev.jqueryui.com/ticket/5275 告诉我使用自定义HTML示例 这里 我没有运气。

我该如何让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. 使用此jQuery UI扩展
2. 然后在自动完成选项中 autocomplete({ html:true});
3. 现在您可以通过HTML <div>sample</div> 在自动完成的JSON输出的“标签”字段中。

如果您不知道如何将插件添加到jQuery UI，则：

1. 将插件（ScottGonzá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

我遇到了同样的问题，但是我更喜欢为我的选项（“源”）使用静态选项进行性能。如果您使用此解决方案尝试了一下，您会发现整个标签上的jQuery搜索。

例如，如果您提供：

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

然后输入“跨度”将匹配两个结果，以使其仅覆盖值 $.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

我有克拉伦斯提到的问题。我需要供应 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”字段的检查。如果在那里，它仅使用该字段。如果不存在，它可以正常工作。

然后，您像以前一样完全使用自动完成，除非您可以在JSON对象中添加“ SearchOnly”键。

我希望对某人有帮助！