在jQuery UI自动完成中使用HTML

小编典典

在jQuery UI自动完成中使用HTML

html

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

我能够做类似的事情：

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

那会在下拉菜单中显示为红色文本。

从1.8.4开始，这不起作用。我找到了，该页面告诉我在这里使用自定义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"}]

阅读 318

2020-05-10

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

2020-05-10