在 jQuery UI 自动完成中使用 HTML [英] Using HTML in jQuery UI autocomplete

问题描述

在 jQuery UI 1.8.4 之前，我可以使用 HTML 在我为使用自动完成而构建的 JSON 数组中.

Before jQuery UI 1.8.4 I could use HTML in the JSON array I built to work with an autocomplete.

我能够执行以下操作:

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

这将在下拉列表中显示为红色文本.

That would show up as red text in the drop down.

从 1.8.4 开始不起作用.我发现 http://dev.jqueryui.com/ticket/5275 告诉我使用自定义 HTML 示例 here 我没有运气.

As of 1.8.4 that does not work. I found http://dev.jqueryui.com/ticket/5275 which tells me to use the custom HTML example here which I have had no luck with.

如何让 HTML 显示在建议中?

How can I go about getting HTML to show up in the suggestion?

我的 jQuery 是:

My jQuery is:

<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:

My JSON array includes HTML like the following:

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

推荐答案

将此添加到您的代码中:

Add this to your code:

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

Note: On old versions of jQueryUI use .data("autocomplete")" instead of .data("ui-autocomplete")

这篇关于在 jQuery UI 自动完成中使用 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！