ASP.NET GridView中DropDownList支持文本/值双输入匹配选择的实现方案

默认情况下，ASP.NET的DropDownList控件只支持匹配DataTextField的值来选中对应项——也就是你当前遇到的行为：输入内容和显示文本匹配时才会触发选中。如果想要同时支持输入DataValueField的值也能选中对应项，控件本身没有原生这个功能，需要你自己添加一点额外逻辑来实现。

下面是两种可行的实现方式：

1. 前端JavaScript实现（推荐，无需页面回发） #

如果你的DropDownList是可输入的（比如结合了输入框的ComboBox形式），可以通过监听输入事件，同时检查DataTextField和DataValueField的值来匹配选项：

// 假设你的DropDownList客户端ID是ddlTarget
const ddl = document.getElementById('<%= ddlTarget.ClientID %>');
const inputBox = ddl.parentElement.querySelector('input'); // 根据实际DOM结构找到输入框

inputBox.addEventListener('input', function(e) {
    const inputVal = e.target.value.trim().toLowerCase();
    // 遍历所有选项，同时匹配文本和值
    for (let i = 0; i < ddl.options.length; i++) {
        const option = ddl.options[i];
        if (option.text.toLowerCase() === inputVal || option.value.toLowerCase() === inputVal) {
            ddl.selectedIndex = i;
            break;
        }
    }
});

2. 后端代码实现（需要页面回发） #

如果你的场景允许页面回发，可以在TextChanged事件里处理双重匹配逻辑：

protected void ddlTarget_TextChanged(object sender, EventArgs e)
{
    DropDownList ddl = sender as DropDownList;
    string inputContent = ddl.Text.Trim();
    
    // 先尝试匹配DataTextField
    ListItem matchByText = ddl.Items.FindByText(inputContent);
    if (matchByText != null)
    {
        matchByText.Selected = true;
        return;
    }
    
    // 再尝试匹配DataValueField
    ListItem matchByValue = ddl.Items.FindByValue(inputContent);
    if (matchByValue != null)
    {
        matchByValue.Selected = true;
    }
}

记得给DropDownList设置AutoPostBack="true"和OnTextChanged="ddlTarget_TextChanged"属性。

额外注意点 #

• 如果你的DropDownList是纯下拉选择（不可输入），上述逻辑不适用——这种场景下用户只能选择选项，无法直接输入内容。
• 建议统一转换为大小写一致的格式（比如全小写）再匹配，避免大小写敏感导致匹配失败。
• 如果你用的是第三方ComboBox控件（比如Telerik、DevExpress的组件），可以先查看控件文档，部分组件自带类似的双字段匹配功能，只需开启对应属性即可。

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