如何为ASP.NET MVC中jQuery Autocomplete选中项设置灰色背景

1. 确认jQuery UI样式文件引入状态 #

jQuery Autocomplete的默认选中态样式依赖jQuery UI的CSS文件，先检查项目是否正确引入了对应版本的样式文件：

<!-- 引入官方CDN的jQuery UI样式，版本需与jQuery UI JS匹配 -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

如果是本地引入，要核对文件路径是否正确，避免出现404加载失败的情况。

2. 自定义CSS强制覆盖样式 #

若默认样式被项目其他CSS冲突覆盖，可手动添加优先级更高的自定义样式：

/* 针对Autocomplete下拉选中项的样式设置 */
.ui-autocomplete .ui-menu-item.ui-state-active,
.ui-autocomplete .ui-menu-item:hover {
    background-color: #cccccc !important; /* 灰色背景，可按需调整色值 */
    border-color: #999999 !important;
    color: #000000 !important;
}

将这段代码放在项目的全局样式文件中，或页面的<style>标签内，注意要放在jQuery UI CSS引入之后，确保样式优先级生效。

3. 排查Autocomplete初始化配置 #

检查初始化代码中是否存在修改列表项样式的冲突逻辑，比如open事件内的不当操作：

$("#searchInput").autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "/Search/GetSuggestions",
            type: "GET",
            data: { term: request.term },
            success: function(data) {
                response(data);
            }
        });
    },
    minLength: 2,
    select: function(event, ui) {
        $("#searchInput").val(ui.item.label);
        return false;
    }
    // 避免在此处添加修改下拉列表样式的代码导致冲突
});

4. 验证HTML结构合理性 #

确保输入框所在的DOM结构没有被异常样式影响：

<div class="form-group">
    <label for="searchInput">搜索关键词:</label>
    <input type="text" id="searchInput" class="form-control">
</div>

检查父容器是否存在overflow:hidden、z-index过低等可能干扰下拉列表渲染的样式设置。

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