ASP.NET Core中Autocomplete文本框下拉选项无法显示问题

针对你遇到的AJAX成功获取数据但Autocomplete下拉选项无法显示的问题，以下是具体的排查和修复方案：

1. 调整CSS加载顺序与位置 #

当前你将CSS链接放在了Scripts区块中，这会导致样式在页面底部加载，可能在Autocomplete初始化后才生效，导致下拉框因缺少样式而不可见。

修复：
将CSS链接移到页面头部（比如布局页的<head>或视图的专属头部区块），并确保jQuery UI的CSS在Bootstrap CSS之后加载，避免样式被覆盖：

@section Head {
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="Stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" />
}

2. 移除阻塞性的Alert弹窗 #

你在source函数中添加的alert("llllllllllllllllllllll")会阻塞JavaScript执行，干扰Autocomplete的响应回调逻辑，导致下拉框无法及时渲染。

修复：
直接删除该alert语句：

$("#itemname").autocomplete({
    source: function (request, response) {
        kk(request, response);
        // 移除alert语句
    },
    // 其他配置...
});

3. 明确Autocomplete触发条件 #

添加minLength配置项，确保输入至少1个字符后才触发自动补全，避免无意义的空请求和潜在的渲染问题：

$("#itemname").autocomplete({
    source: function (request, response) {
        kk(request, response);
    },
    minLength: 1, // 新增配置
    select: function (e, i) {
        // 保留原有逻辑
    }
});

4. 排查DOM与样式冲突 #

打开浏览器开发者工具，在输入框中输入内容后：

• 检查是否生成了ul.ui-autocomplete元素：如果存在但不可见，说明是样式冲突问题。
• 手动添加自定义CSS强制显示下拉框：

.ui-autocomplete {
    display: block !important;
    position: absolute;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 0;
    list-style: none;
}

验证修复后的完整脚本示例 #

$(document).ready(function () {
    var kk = function (request, response) {
        $.ajax({
            url: '/Bom/AutoComplete/',
            data: { "prefix": request.term },
            type: "POST",
            success: function (data) {
                var formattedData = $.map(data, function (item) {
                    return {
                        label: item.label,
                        value: item.val
                    };
                });
                response(formattedData);
                console.log("888", formattedData)
            },
            error: function (response) {
                alert(response.responseText);
            }
        });
    };

    $("#itemname").autocomplete({
        source: function (request, response) {
            kk(request, response);
        },
        minLength: 1,
        select: function (e, i) {
            // 可选：处理选中事件
            // $("#personNameValue").val(i.item.val);
        }
    });
});

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