在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示例.

如何让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. 现在,您可以<div>sample</div>在JSON输出的"label"字段中传递html 以进行自动完成.

如果您不知道如何将插件添加到JQuery UI,那么:

1. 将插件(ScottGonzález的html扩展名)保存在js文件中或下载js文件.
2. 您已经在html页面(或jquery-ui js文件)中添加了jquery-ui自动完成脚本.在该自动完成javascript文件之后添加此插件脚本.