ASP.NET Core MVC自动补全组件添加滚动条及高度控制方案问询

方法一：通过CSS添加滚动条并限制高度 #

如果你的自动补全用的是jQuery UI Autocomplete（从代码截图推测大概率是），直接给下拉框容器加CSS样式就能解决：

.ui-autocomplete {
    max-height: 300px; /* 自定义最大高度，比如300px */
    overflow-y: auto; /* 垂直方向滚动 */
    overflow-x: hidden; /* 隐藏水平滚动条 */
}

把这段代码加到你的site.css或者页面的<style>标签里，就能让下拉框超过高度后自动出现滚动条，不会无限撑开。

方法二：后端限制返回结果数量 #

从根源减少数据量，在处理自动补全请求的Action里，只返回前N条匹配结果（比如前20条），同时可以在前端提示用户输入更精准的内容：

// 示例Action代码
public JsonResult AutoComplete(string term)
{
    var results = _dbContext.YourTable
        .Where(x => x.Name.Contains(term))
        .Take(20) // 只取前20条
        .Select(x => new { label = x.Name, value = x.Id })
        .ToList();
    return Json(results);
}

方法三：自定义补全组件的容器样式（如果是自定义实现） #

如果是自己写的JS渲染补全列表，在生成下拉容器的时候直接设置样式：

// 假设你的补全列表是动态创建的ul
var $dropdown = $('<ul class="autocomplete-dropdown"></ul>').css({
    maxHeight: '300px',
    overflowY: 'auto',
    overflowX: 'hidden'
});
// 然后把$dropdown添加到页面中

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