ASP.NET MVC中jQuery Autocomplete显示位置异常问题解决

1. 修复候选列表定位问题（相对/绝对定位） #

候选列表显示在页面左上角的核心原因是下拉列表的定位基准错误，通过以下CSS调整即可解决：

• 给输入框的父容器添加相对定位，作为下拉列表的定位参考：

.line-manager-input-group {
    position: relative;
}

• 针对jQuery UI生成的.ui-autocomplete下拉列表，设置绝对定位，使其锚定在输入框下方：

.ui-autocomplete {
    position: absolute;
    top: 100%; /* 紧贴输入框底部 */
    left: 0;
    width: 100%; /* 和输入框同宽 */
    margin-top: 2px; /* 可选：添加上下间距 */
    z-index: 1000; /* 确保在其他元素上方 */
    border: 1px solid #dee2e6; /* 适配Bootstrap风格 */
    border-radius: 0.25rem;
    background-color: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

对应HTML结构（给输入框套父容器）：

<div class="line-manager-input-group mb-3">
    @Html.TextBoxFor(m => m.txtLineManagerId, new { @class = "form-control", placeholder = "输入员工ID" })
</div>
@Html.TextBoxFor(m => m.LineManagerName, new { @class = "form-control", placeholder = "员工姓名", disabled = "disabled" })

2. 清理混乱的jQuery版本 #

多个jQuery版本共存会导致冲突，按以下步骤清理：

• 检查项目中所有引用的jQuery文件（通常在_Layout.cshtml或页面局部视图中），移除重复的<script>引用，只保留一个稳定版本（推荐使用jQuery 3.6.x，兼容jQuery UI 1.13.x）。
• 确保引用顺序正确：先加载jQuery，再加载jQuery UI，最后加载自定义脚本：

<!-- 只保留一个jQuery引用 -->
<script src="~/Scripts/jquery-3.6.4.min.js"></script>
<!-- 加载jQuery UI（需和jQuery版本兼容） -->
<script src="~/Scripts/jquery-ui-1.13.2.min.js"></script>
<!-- 自定义Autocomplete脚本 -->
<script src="~/Scripts/LineManagerAutocomplete.js"></script>

• 如果无法完全移除旧版本，可使用jQuery.noConflict()隔离：

// 加载旧版本后执行
var $oldJquery = jQuery.noConflict(true);
// 后续使用$指向新版本
<script src="~/Scripts/jquery-3.6.4.min.js"></script>

但优先建议只保留一个兼容版本，避免不必要的冲突。

3. 适配功能的完整脚本、CSS及资源 #

所需资源清单 #

• jQuery：3.6.x 版本
• jQuery UI：1.13.x 版本（包含Autocomplete组件）
• Bootstrap（可选，用于统一页面样式）：5.x 版本

完整自定义脚本 #

$(function () {
    $("#txtLineManagerId").autocomplete({
        source: function (request, response) {
            // 调用后端接口获取员工ID候选列表
            $.ajax({
                url: '@Url.Action("GetLineManagerIds", "Home")', // 替换为你的控制器方法
                type: "GET",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.EmployeeId, // 显示的候选文本
                            value: item.EmployeeId,
                            name: item.EmployeeName // 携带员工姓名
                        };
                    }));
                }
            });
        },
        minLength: 1, // 输入1个字符后触发
        select: function (event, ui) {
            // 选择选项后填充员工姓名到输入框
            $("#LineManagerName").val(ui.item.name);
            return false; // 阻止默认填充行为
        },
        open: function () {
            // 可选：打开时调整下拉列表宽度匹配输入框
            $(this).autocomplete("widget").width($(this).width());
        }
    });
});

后端控制器示例（供参考） #

public ActionResult GetLineManagerIds(string term)
{
    // 从数据库或业务层获取匹配的员工数据
    var employees = db.Employees
        .Where(e => e.EmployeeId.Contains(term))
        .Select(e => new { EmployeeId = e.EmployeeId, EmployeeName = e.EmployeeName })
        .ToList();
    
    return Json(employees, JsonRequestBehavior.AllowGet);
}

配套CSS（整合jQuery UI与Bootstrap） #

/* 覆盖jQuery UI默认样式，适配Bootstrap */
.ui-autocomplete {
    padding: 0;
    list-style: none;
}
.ui-autocomplete li {
    padding: 0.5rem 1rem;
    cursor: pointer;
}
.ui-autocomplete li:hover {
    background-color: #f8f9fa;
}
.ui-autocomplete .ui-state-active {
    background-color: #0d6efd;
    color: #fff;
}

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