实现可编辑的下拉框

最新推荐文章于 2026-05-17 05:53:58 发布

原创最新推荐文章于 2026-05-17 05:53:58 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#asp #ajax #控件

asp.net 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何实现一个可编辑的下拉框，该框具备模糊查询功能。由于ASP.NET的ComboBox的AutoCompleteMode属性无法满足过滤需求，作者选择创建一个组合控件，结合ajaxToolkit的AutoCompleteExtender实现。通过CSS调整文本框位置使其覆盖在下拉框上，同时在C#端编写DDL_filter_type_SelectedIndexChanged和myTextBox_TextChanged事件，确保两个控件与数据库记录同步。

最近在做的一个小task，网页端下拉框中绑定数据库的字段信息，需要实现下拉框可编辑，并且实现模糊查询的功能。

首先考虑了combobox，combobox虽然是下拉框和文本框的组合框，也包含了自动匹配的属性 AutoCompleteMode，但是我想要的是含有过滤功能的模糊查询， AutoCompleteMode属性貌似做不到过滤。所以自己写了控件，下拉框与文本框的组合，利用ajaxToolkit的控件AutoCompleteExtender，对文本框输入可实现含过滤功能的模糊查询，这里先不介绍AutoCompleteExtender的使用，主要介绍自己写的可编辑的下拉框的实现。

主要思路：在asp端，利用CSS的style属性调整位置和宽度，使得文本框悬浮在下拉框上，看起来就像一个控件，实则是两个控件。在C#端编写下拉框DDL_filter_type_SelectedIndexChanged事件，和文本框 myTextBox_TextChanged的事件，使得两个控件能够关联，同时指向数据库的同一条记录，下面是代码：

asp端：

<asp:DropDownList ID="DDL_filter_type" runat="server" Style="width:375px;" AutoPostBack="True"

OnSelectedIndexChanged="DDL_filter_type_SelectedIndexChanged" AppendDataBoundItems="true"

DataTextField="type" DataValueField="typeId" DataSourceID="SqlDataSource_new_type">
<asp:ListItem Text="All" Value="-1" Selected="True"></asp:ListItem>
</asp:DropDownList>

<asp:TextBox runat="server" ID="myTextBox" Text="All" Style="width:351px; position: absolute; left:52px;top:15px"
AutoPostBack="True" OnTextChanged="myTextBox_TextChanged" />

C#端：

    protected void DDL_filter_type_SelectedIndexChanged(object sender, EventArgs e)
    {
        myTextBox.Text = DDL_filter_type.SelectedItem.Text;
    }

    protected void myTextBox_TextChanged(object sender, EventArgs e)
    {

          if (myTextBox.Text == "")
        {
           DDL_filter_type.SelectedValue = "-1";

         }

          else
         {
        bool a = false;

        for (int i = 0; i < DDL_filter_type.Items.Count; i++)
        {
            a = DDL_filter_type.Items[i].Text == myTextBox.Text;
            if (a)  //判断下拉值里是否包含文本框输入字符
            {
                DDL_filter_type.SelectedIndex = i;//将下拉框对应的项选中
            }
        }
         }

    }