实现百度搜索框功能
实现效果:
基本的实现思路是 界面为TextBox(提供关键字的输入)+ListBox(相关内容以列表显示),数据的获取通过委托实现。
以下是控件实现代码:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Data; using System.Text; using System.Windows.Forms; namespace MyControl { /// <summary> /// 查询器,实现输入查询条件时下拉框自 /// 动展开并显示相近的内容 /// </summary> public partial class UC_QueryBox : UserControl { /// <summary> /// 声明委托,用来获取下拉框中需要显示的项 /// </summary> /// <param name="p_KeyWord">查询关键字</param> /// <returns>查询结果集</returns> public delegate List<string> QueryDelegate(string p_KeyWord); public QueryDelegate GetData; private ListBox m_ListBox; /// <summary> /// 设置或获取关键字输入框 /// </summary> public TextBox M_TextBox { set { tx_context = value; } get { return tx_context; } } /// <summary> /// 设置或获取下拉框 /// </summary> public ListBox M_ListBox { set { m_ListBox = value; } get { return m_ListBox; } } /// <summary> /// 获取或设置查询关键字 /// </summary> public string M_QueryText { get { return this.M_TextBox.Text; } set { this.M_TextBox.Text = value; } } /// <summary> /// 构造方法 /// </summary> public UC_QueryBox() { InitializeComponent(); } /// <summary> /// 当关键字输入框文本改变时,触发查询 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void tx_context_TextChanged(object sender, EventArgs e) { this.ListBoxDispose(); //如果关键字输入框内容不为空 if (!string.IsNullOrEmpty(tx_context.Text)) { //获取下拉框数据 List<string> items = GetData(tx_context.Text); //如果查询的数据项不为空 if (items.Count > 0) { this.ListBoxInit(items); } } } /// <summary> /// 下拉框中项被选时 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void tx_context_KeyDown(object sender, KeyEventArgs e) { if (m_ListBox != null) { //按下键盘↓键 选择索引向下移一位 if (e.KeyCode == Keys.Down && m_ListBox.Items.Count > 0 && m_ListBox.SelectedIndex < m_ListBox.Items.Count - 1) { m_ListBox.SelectedIndex = m_ListBox.SelectedIndex + 1; } //按下键盘 ↑键 选择索引向上移一位 else if (e.KeyCode == Keys.Up && m_ListBox.Items.Count > 0 && m_ListBox.SelectedIndex != 0) { m_ListBox.SelectedIndex = m_ListBox.SelectedIndex - 1; } //按下键盘 Enter键 选中项赋值 else if (e.KeyCode == Keys.Enter && m_ListBox.Items.Count > 0 && m_ListBox.SelectedIndex != -1) { //输入框内容赋值为下拉框中选中的项 tx_context.Text = m_ListBox.SelectedItem.ToString(); ////下拉框收起 this.ListBoxDispose(); } } } private void QueryBox_Load(object sender, EventArgs e) { this.SendToBack(); } /// <summary> /// 收起(清空)下拉框 /// </summary> private void ListBoxDispose() { if (this.m_ListBox != null) { this.Controls.Remove(m_ListBox); this.m_ListBox = null; } } /// <summary> /// 展开下拉框 /// </summary> private void ListBoxInit(List<string> items) { //实例化下拉框 m_ListBox = new ListBox(); m_ListBox.Location = new Point(0, M_TextBox.Height); m_ListBox.Size = new Size(M_TextBox.Width, 100); m_ListBox.MouseClick += new MouseEventHandler(m_ListBox_MouseClick); //添加数据 m_ListBox.Items.AddRange(items.ToArray()); this.Controls.Add(m_ListBox); //使下拉框覆盖其他控件 this.BringToFront(); } /// <summary> /// 鼠标点击下拉框中的项时 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> private void m_ListBox_MouseClick(object sender, MouseEventArgs e) { if (e.Button == MouseButtons.Left) { if (!string.IsNullOrEmpty(m_ListBox.SelectedItem.ToString())) { M_QueryText = m_ListBox.SelectedItem.ToString(); } } this.ListBoxDispose(); } } }
namespace MyControl { partial class UC_QueryBox { /// <summary> /// 必需的设计器变量。 /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// 清理所有正在使用的资源。 /// </summary> /// <param name="disposing">如果应释放托管资源,为 true;否则为 false。</param> protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } #region 组件设计器生成的代码 /// <summary> /// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容。 /// </summary> private void InitializeComponent() { this.tx_context = new System.Windows.Forms.TextBox(); this.SuspendLayout(); // // tx_context // this.tx_context.Dock = System.Windows.Forms.DockStyle.Fill; this.tx_context.Location = new System.Drawing.Point(0, 0); this.tx_context.Margin = new System.Windows.Forms.Padding(0); this.tx_context.Name = "tx_context"; this.tx_context.Size = new System.Drawing.Size(150, 21); this.tx_context.TabIndex = 0; this.tx_context.TextChanged += new System.EventHandler(this.tx_context_TextChanged); this.tx_context.KeyDown += new System.Windows.Forms.KeyEventHandler(this.tx_context_KeyDown); // // UC_QueryBox // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.AutoSize = true; this.BackColor = System.Drawing.Color.Transparent; this.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch; this.Controls.Add(this.tx_context); this.DoubleBuffered = true; this.Margin = new System.Windows.Forms.Padding(0); this.Name = "UC_QueryBox"; this.Size = new System.Drawing.Size(150, 22); this.Load += new System.EventHandler(this.QueryBox_Load); this.ResumeLayout(false); this.PerformLayout(); } #endregion private System.Windows.Forms.TextBox tx_context; } }
以下是测试项目代码:
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace Test { public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { //绑定委托 uC_QueryBox1.GetData = new MyControl.UC_QueryBox.QueryDelegate(GetData); } private List<string> GetData(string p_keyWord) { //这里写具体的数据获取方法 return new List<string>() { "123", "234" }; } } }
namespace Test { partial class Form1 { /// <summary> /// 必需的设计器变量。 /// </summary> private System.ComponentModel.IContainer components = null; /// <summary> /// 清理所有正在使用的资源。 /// </summary> /// <param name="disposing">如果应释放托管资源,为 true;否则为 false。</param> protected override void Dispose(bool disposing) { if (disposing && (components != null)) { components.Dispose(); } base.Dispose(disposing); } #region Windows 窗体设计器生成的代码 /// <summary> /// 设计器支持所需的方法 - 不要 /// 使用代码编辑器修改此方法的内容。 /// </summary> private void InitializeComponent() { this.uC_QueryBox1 = new MyControl.UC_QueryBox(); this.SuspendLayout(); // // uC_QueryBox1 // this.uC_QueryBox1.AutoSize = true; this.uC_QueryBox1.BackColor = System.Drawing.Color.Transparent; this.uC_QueryBox1.BackgroundImageLayout = System.Windows.Forms.ImageLayout.Stretch; this.uC_QueryBox1.Location = new System.Drawing.Point(64, 77); this.uC_QueryBox1.M_ListBox = null; this.uC_QueryBox1.M_QueryText = ""; this.uC_QueryBox1.Margin = new System.Windows.Forms.Padding(0); this.uC_QueryBox1.Name = "uC_QueryBox1"; this.uC_QueryBox1.Size = new System.Drawing.Size(150, 22); this.uC_QueryBox1.TabIndex = 0; // // Form1 // this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 12F); this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font; this.ClientSize = new System.Drawing.Size(292, 266); this.Controls.Add(this.uC_QueryBox1); this.Name = "Form1"; this.Text = "Form1"; this.Load += new System.EventHandler(this.Form1_Load); this.ResumeLayout(false); this.PerformLayout(); } #endregion private MyControl.UC_QueryBox uC_QueryBox1; } }
以上代码的不足之处是,当此控件在容器边缘时下拉框显示不全,如设置容器AutoSize为True效果也不理想。