如何用ASP实现带数据库动态建议的可输入下拉列表？

原生DropDownList不支持自由输入，所以需要替换为可输入控件搭配动态提示功能，以下是两种实用方案：

方案一：用ASP.NET AJAX Toolkit的AutoCompleteExtender #

适合习惯服务器端控件的场景，配置简单。

1. 替换原有控件 #

把DropDownList换成TextBox，并添加AutoCompleteExtender扩展：

<asp:TextBox ID="txtAramaKayitlari" runat="server" Style="width:50%;"></asp:TextBox>
<asp:AutoCompleteExtender
    ID="AutoCompleteExtender1"
    runat="server"
    TargetControlID="txtAramaKayitlari"
    ServiceMethod="GetSuggestions"
    MinimumPrefixLength="1" <!-- 输入1个字符就触发提示 -->
    CompletionInterval="300" <!-- 触发间隔（毫秒） -->
    EnableCaching="false" <!-- 禁用缓存，保证数据最新 -->
    CompletionSetCount="10" <!-- 最多显示10条建议 -->
></asp:AutoCompleteExtender>

2. 编写服务器端取数方法 #

在后台.cs文件中实现读取数据库的静态方法（必须标记WebMethod）：

[System.Web.Services.WebMethod]
public static string[] GetSuggestions(string prefixText)
{
    List<string> suggestions = new List<string>();
    // 替换成你的数据库连接字符串
    string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["YourConnString"].ConnectionString;
    
    using (System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(connStr))
    {
        // 模糊匹配输入内容的查询语句
        string query = "SELECT TargetColumn FROM YourTable WHERE TargetColumn LIKE @Prefix";
        using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("@Prefix", prefixText + "%");
            conn.Open();
            System.Data.SqlClient.SqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                suggestions.Add(reader["TargetColumn"].ToString());
            }
        }
    }
    return suggestions.ToArray();
}

3. 配置Web.config #

确保已注册AJAX Toolkit控件（NuGet安装后会自动配置，手动配置需在system.web节点下添加）：

<controls>
    <add tagPrefix="asp" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" />
</controls>

方案二：TextBox + jQuery UI Autocomplete #

灵活性更强，适合需要自定义样式或交互的场景。

1. 添加控件与脚本引用 #

替换DropDownList为TextBox，引入jQuery和jQuery UI资源：

<asp:TextBox ID="txtAramaKayitlari" runat="server" Style="width:50%;"></asp:TextBox>

<!-- 引入jQuery和jQuery UI -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

2. 编写前端交互与后端接口 #

前端JS代码：

$(function() {
    $("#<%= txtAramaKayitlari.ClientID %>").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "YourPage.aspx/GetSuggestions",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({ prefixText: request.term }),
                dataType: "json",
                success: function(result) {
                    response(result.d);
                }
            });
        },
        minLength: 1,
        select: function(event, ui) {
            // 选中建议后触发回发（模拟原DropDownList的选中逻辑）
            <%= ClientScript.GetPostBackEventReference(txtAramaKayitlari, "") %>;
        }
    });
});

服务器端方法（和方案一一致）：

[System.Web.Services.WebMethod]
public static string[] GetSuggestions(string prefixText)
{
    List<string> suggestions = new List<string>();
    string connStr = System.Configuration.ConfigurationManager.ConnectionStrings["YourConnString"].ConnectionString;
    
    using (System.Data.SqlClient.SqlConnection conn = new System.Data.SqlClient.SqlConnection(connStr))
    {
        string query = "SELECT TargetColumn FROM YourTable WHERE TargetColumn LIKE @Prefix";
        using (System.Data.SqlClient.SqlCommand cmd = new System.Data.SqlClient.SqlCommand(query, conn))
        {
            cmd.Parameters.AddWithValue("@Prefix", prefixText + "%");
            conn.Open();
            System.Data.SqlClient.SqlDataReader reader = cmd.ExecuteReader();
            while (reader.Read())
            {
                suggestions.Add(reader["TargetColumn"].ToString());
            }
        }
    }
    return suggestions.ToArray();
}

3. 处理选中后的回发（可选） #

如果需要像原DropDownList一样触发服务器端逻辑，给TextBox添加TextChanged事件：

<asp:TextBox ID="txtAramaKayitlari" runat="server" Style="width:50%;" OnTextChanged="txtAramaKayitlari_TextChanged" AutoPostBack="True"></asp:TextBox>

后台代码：

protected void txtAramaKayitlari_TextChanged(object sender, EventArgs e)
{
    // 复制原ctlAramaKayitlari_SelectedIndexChanged中的业务逻辑
    string selectedValue = txtAramaKayitlari.Text;
    // 后续处理...
}

注意事项 #

• 替换代码中的YourConnString、YourTable、TargetColumn为实际的数据库连接字符串、表名和字段名。
• 方案一需通过NuGet安装AjaxControlToolkit包。
• 可根据需求调整MinimumPrefixLength、CompletionSetCount等参数。

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