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

诀窍是：

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

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

将插件（ScottGonzález的html扩展名）保存在js文件中或下载js文件。
您已经在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

我有同样的问题，但我更喜欢为我的选项（'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

我有克拉伦斯提到的问题。我需要提供HTML以使样式和图像更好看。这导致键入“div”匹配所有元素。

然而，我的价值只是一个身份证号码，所以我不能允许搜索就是这样。我需要搜索来查找多个值，而不仅仅是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对象。

我希望能帮助别人！

在jQuery UI自动完成中使用HTML

5 个答案: