优化DropDownList与TextBox的交互体验

最近接到一位网友的求助，他们面临一个问题：在一个包含大量选项的 DropDownList 中，用户难以快速找到所需选项。为了解决这个问题，我们可以在 DropDownList 前添加一个 TextBox，允许用户输入文本，从而快速筛选和选择对应的选项。

当用户在 TextBox 中输入内容时，系统会自动在 DropDownList 中查找匹配的项，并将其选中。同时，如果用户直接从 DropDownList 中选择了一个选项，该选项的值也会显示在 TextBox 中，以提供双向的交互体验。

为了实现这一功能，我设计了两个演示示例，分别采用了不同的技术方案。

Demo 1: 简单实现

首先，我们来看一下简单的实现方式。这种方式虽然能够基本满足需求，但在某些情况下可能会出现异常，需要进一步优化。

以下是 Demo1.aspx 的代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo1.aspx.cs" Inherits="Demo1" %>



    


    
        
        

        
            
            
            
        
    

Demo1.aspx.cs 的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Demo1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        if (string.IsNullOrEmpty(this.TextBox1.Text)) return;
        this.DropDownList1.ClearSelection();
        this.DropDownList1.Items.FindByText(this.TextBox1.Text).Selected = true;
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (this.DropDownList1.SelectedIndex == -1) return;
        this.TextBox1.Text = this.DropDownList1.SelectedItem.Text;
    }
}

Demo 2: 使用适配器模式

为了提高代码的可维护性和扩展性，我们可以使用适配器模式来实现这一功能。具体来说，我们创建了一个自定义的 DropDownListAdapter 类，用于处理 TextBox 和 DropDownList 之间的交互。

以下是 DropDownListAdapter 类的代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI.WebControls;

namespace Insus.NET
{
    public class DropDownListAdapter : TextBox
    {
        DropDownList _DropDownList;

        public DropDownListAdapter(DropDownList dropDownList)
        {
            this._DropDownList = dropDownList;
        }

        public override string Text
        {
            get
            {
                return _DropDownList.SelectedItem.Text;
            }
            set
            {
                this._DropDownList.ClearSelection();
                foreach (ListItem li in this._DropDownList.Items)
                {
                    if (li.Text == value)
                    {
                        this._DropDownList.Items.FindByText(value).Selected = true;
                        break;
                    }
                }
            }
        }
    }
}

Demo2.aspx 的代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo2.aspx.cs" Inherits="Demo2" %>



    


    
        

            
            

            
                
                
                
            
        

    

Demo2.aspx.cs 的代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Insus.NET;

public partial class Demo2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    }

    protected void TextBox1_TextChanged(object sender, EventArgs e)
    {
        DropDownListAdapter obj = new DropDownListAdapter(this.DropDownList1);
        obj.Text = this.TextBox1.Text;
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownListAdapter obj = new DropDownListAdapter(this.DropDownList1);
        this.TextBox1.Text = obj.Text;
    }
}

以上就是两种实现方式的详细说明，希望对大家有所帮助。