如何为jQuery UI autocomplete选项添加鼠标悬停提示框

方法一：事件委托监听鼠标悬停 #

jQuery UI Autocomplete的下拉菜单动态生成，选项项类为.ui-menu-item，可以通过事件委托绑定mouseenter事件，获取对应项的数据源信息来显示邮箱。

修改你的函数，在初始化完成后添加监听逻辑：

function AutopopulateUsers(id, url) {
    //url='@Url.Action("GetUserByName", "Home")'
    $(id).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                data: { name: request.term },
                success: function (data) {
                    response($.map(data.rows, function (item) {                       
                        return { label: item.Name, value: item.Name, info: $.trim(item.NetId) + '#' + item.UserId + '#' + item.Email };
                    }));
                }
            })
        },
        select: function (e, i) {
            $(this).focus();
            $(id).val(i.item.value)
            var data = i.item.info.split('#');
            if (data.length > 0) {
                $(id).attr("data-userid", data[1]);
                $(id).attr("data-netid", data[0]);
                $(id).attr("data-email", data[2]);

                $(id).data("userid", data[1]);
                $(id).data("netid", data[0]);
                $(id).data("email", data[2]);
            }
            return false;
        },
        close: function () {
            var userId = $(id).data("userid");
            if (userId == 0 || userId == null || userId == '' || userId == undefined) {
                $(this).val('');
            }
        },
        minLength: 3
    });

    // 绑定鼠标悬停事件
    $(document).on('mouseenter', '.ui-autocomplete .ui-menu-item', function() {
        var itemData = $(this).data('item.autocomplete');
        if (itemData && itemData.info) {
            var email = itemData.info.split('#')[2];
            // 使用原生title属性显示邮箱
            $(this).attr('title', email);
        }
    });
}

方法二：自定义选项渲染（推荐，样式可控性更强） #

重写Autocomplete的_renderItem方法，自定义选项的HTML结构，把邮箱嵌入元素中，配合CSS实现悬停显示效果：

function AutopopulateUsers(id, url) {
    //url='@Url.Action("GetUserByName", "Home")'
    $(id).autocomplete({
        source: function (request, response) {
            $.ajax({
                url: url,
                type: "POST",
                dataType: "json",
                data: { name: request.term },
                success: function (data) {
                    // 拆分info字段为单独属性，避免后续字符串拆分
                    response($.map(data.rows, function (item) {                       
                        return { 
                            label: item.Name, 
                            value: item.Name, 
                            netId: $.trim(item.NetId),
                            userId: item.UserId,
                            email: item.Email
                        };
                    }));
                }
            })
        },
        select: function (e, i) {
            $(this).focus();
            $(id).val(i.item.value)
            // 直接使用拆分后的属性，更清晰
            $(id).attr("data-userid", i.item.userId);
            $(id).attr("data-netid", i.item.netId);
            $(id).attr("data-email", i.item.email);

            $(id).data("userid", i.item.userId);
            $(id).data("netid", i.item.netId);
            $(id).data("email", i.item.email);
            return false;
        },
        close: function () {
            var userId = $(id).data("userid");
            if (userId == 0 || userId == null || userId == '' || userId == undefined) {
                $(this).val('');
            }
        },
        minLength: 3
    }).data("ui-autocomplete")._renderItem = function(ul, item) {
        // 自定义选项HTML，嵌入邮箱元素
        return $("<li>")
            .append(`<div>${item.label}<span class="email-tip">${item.email}</span></div>`)
            .appendTo(ul);
    };
}

添加CSS控制邮箱显示：

.email-tip {
    display: none;
    margin-left: 12px;
    color: #666;
    font-size: 0.9em;
}

.ui-menu-item:hover .email-tip {
    display: inline-block;
}

说明 #

• 方法一无需修改数据源结构，适合快速适配；
• 方法二将复合字段拆分为单独属性，代码可读性更高，且样式可完全自定义，推荐使用。

内容的提问来源于stack exchange，提问作者Obraine