ASP.NET Core 6 MVC中如何实现仅显示下拉框的可编辑下拉组件

问题原因 #

你给<datalist>标签添加了form-control form-control-lg类，这类样式是为表单输入元素设计的，会让datalist被渲染成可见的下拉框，导致和关联的input文本框同时显示。

修正方案 #

1. 移除datalist的表单样式类 #

修改视图代码，去掉datalist的form-control form-control-lg类（datalist本身是隐藏元素，无需这些样式）：

<input type="text" name="medCompany" id="medCompany" list="ddlmedCompany" class="form-control form-control-lg" />
<datalist id="ddlmedCompany">
@foreach (var item in Model.lstmedCompany)
{
    <option>@item.Text</option>
}
</datalist>

2. 让输入框外观接近下拉框（可选） #

如果希望输入框视觉上更像传统下拉框，可以添加CSS伪元素模拟下拉箭头：

#medCompany {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    cursor: pointer;
}

这段CSS会在输入框右侧添加Bootstrap风格的下拉箭头，点击输入框即可触发datalist选项列表，同时保留输入框可编辑特性。

3. 功能验证 #

修改后运行项目，页面只会显示一个带下拉箭头的可编辑输入框，输入内容时会自动匹配datalist中的选项，不会再出现额外的下拉框。

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