如何将CSHTML网页的Dropdown改为带文本输入的Combobox

原生HTML实现（最简单，适合新手） #

先把你CSHTML里的<select id="ordermodifpick"></select>换成以下结构：

<!-- 可输入的文本框，关联下方的选项列表 -->
<input type="text" id="ordermodifpick" list="pickOptions" name="ordermodifpick">
<!-- 存放预设下拉选项的容器 -->
<datalist id="pickOptions"></datalist>

注意：如果原来的下拉框有name属性，一定要加到input标签上，不然表单提交时拿不到这个字段的值。

修改你的JS填充代码 #

原来的代码是往select里加option，现在要改成往datalist里添加选项，调整后的代码：

$.getJSON("/orders/orderlist/picks", function (picks) {
  const pickDatalist = $('#pickOptions');
  picks.forEach(function (item) {
    pickDatalist.append(
      `<option value="${item}">${item}</option>`
    );
  });
});

这样页面加载后，这个输入框既能手动输入任意文本，也能点击下拉箭头选择预设好的选项。

可选：添加输入过滤功能 #

如果需要用户输入时自动筛选匹配的选项，可以加一段简单的监听代码：

$('#ordermodifpick').on('input', function() {
  const inputValue = $(this).val().toLowerCase();
  // 遍历所有选项，只显示包含输入内容的选项
  $('#pickOptions option').each(function() {
    const optionText = $(this).val().toLowerCase();
    $(this).toggle(optionText.includes(inputValue));
  });
});

为什么推荐原生方案？ #

• 不用额外引入插件，代码量少，新手容易理解和维护
• 兼容性好，几乎所有现代浏览器都支持datalist标签
• 自带原生控件的样式和交互逻辑，不用自己写复杂的下拉弹窗逻辑

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