65.9K
CodeProject 正在变化。 阅读更多。
Home

使用AutoComplete简化数据输入

starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.92/5 (11投票s)

2007年1月15日

CPOL

7分钟阅读

viewsIcon

66244

downloadIcon

984

本教程演示了如何使用 Windows Forms 客户端和 SQL Server 2000 数据中的 TextBox 控件的 AutoComplete 功能的强大功能。

概述

本教程演示了使用 Windows Forms 客户端和 SQL Server 2000 数据中的 TextBox 控件的 AutoComplete 功能的强大功能。

Sample screenshot

图 1 – 运行时模式示例

引言

如果您询问任何最终用户,他们在软件应用程序中最想要的功能是什么,我打赌最常见的答案是“易于使用”。我们可以通过多种方式来改善最终用户体验。在本文中,我将向您展示 TextBox 控件的简单 AutoComplete 功能如何极大地增强数据输入。

我假设读者对 Visual Studio 2005 IDE 有基本的了解,并且能够熟练使用 C# 编写代码。由于本教程使用存储在 SQL Server 中的数据,因此对 SQL 语句和数据连接有基本了解会很有帮助。

什么是 AutoComplete?

通过示例学习总是一件好事; Internet Explorer 包含一项名为 AutoComplete 的功能,该功能会跟踪您最近键入的信息,例如网站地址、表单中的信息以及搜索查询。当您键入新信息时,AutoComplete 会尝试预测您正在键入的内容并提供可能的匹配项。您无需键入完整信息即可节省时间——只需选择 AutoComplete 的匹配项即可!

假设您最近访问了网站 http://www.ebay.com,并且想返回。您可以键入“http://www.eb”,甚至只需键入“eb”,AutoComplete 就会为您补全其余的网址。如果您在一个网站上访问过多个地方,AutoComplete 会为您提供您在该网站上访问过的地方列表。

好吧,它适用于 Internet Explorer。但是,我想在我的会计应用程序中看到同样的功能。如果我在 Customer ID 文本框中键入数据,我能看到系统中所有客户的列表吗?

当然可以,借助 TextBox 控件中内置的新功能;开发人员可以设计具有 AutoComplete 功能的应用程序。如果您想被最终用户视为超级英雄,那么就去您的应用程序中加入此功能,并享受名声(相信我,我已从一位海外客户那里获得了三张期票,想象一下您不必记住 2000 多个客户 ID 了)。

让我们创建一个 Windows 应用程序项目

如果尚未启动 VS 2005 IDE,则可以通过单击 Windows 开始按钮 -> 所有程序 -> Microsoft Visual Studio 2005 -> 单击图标 Microsoft Visual Studio 2005 来启动 IDE。您还可以通过单击桌面上的快捷方式等方式来启动 IDE。

请按照以下步骤创建 Windows 应用程序项目

  • 单击菜单 文件 -> 新建 -> 项目…,或者您也可以按快捷键 Ctrl + Shift + N(请参见图 2)。
  • 在“新建项目”对话框中,选择 Visual C# -> Windows
  • 在“模板”中,选择 Windows 应用程序
  • 请为应用程序命名。我将项目命名为“WinAutoComplete”。您可以根据自己的喜好选择不同的位置来存储应用程序文件。请参见图 3 了解命名过程的说明。
  • 单击 确定 按钮完成该过程。VS 2005 将创建一个新项目,您的项目应如图 4 所示。

Sample screenshot

图 2 – 创建新的 Windows 应用程序项目的过程

Sample screenshot

图 3 – 项目选择和命名过程

Sample screenshot

图 4 – 新建项目视图

因此,你们大多数人会看到类似于图 4 的内容;但是,根据您当前的 VS 2005 IDE 设置,您可能会看到一些工具箱被隐藏或浮动。无论如何,您应该看到一个空白的 Form1,这是新项目的结果。请参阅 VS2005 帮助以自定义 IDE 的外观。

提示:如果工具箱窗口被隐藏或您在 IDE 中看不到它,您可以随时通过菜单视图 -> 工具箱,或按 Ctrl + Alt + X 来使其可见。为了在设计器表面获得最大的空间,您可以使用工具箱的自动隐藏功能。

让我们按照表 1 设置 Form1 的属性,以确保其外观和感觉足够好,以便最终用户提供输入(如果有)并查看报告。如果属性工具箱在 IDE 中不可见,您可以按 F4 键使其可见。在通过属性工具箱应用更改之前,请确保已选择 Form1

表 1. Form1 的属性
属性
文本 Windows Forms AutoComplete 示例
大小 375, 200

注意:创建新项目时,解决方案也会随之创建。一个解决方案中可以包含一个或多个项目。

是时候向新创建的 Form1 添加一些控件了

示例看起来是这样的:我将创建一个示例应用程序,允许用户从 SQL Server 2000 的 NorthWind 数据库中输入产品 ID。AutoComplete 有不同的工作模式;我将确保用户尝试不同的模式,看看哪种模式更适合他们。

我们在 Form1 上需要以下控件

  • 具有不同 AutoComplete 模式的 ComboBox
  • 三个 Label(模式类型、产品 ID 和文件系统)
  • 两个 TextBox(产品 ID 和文件系统)

让我们开始将上述控件拖放到 Form1 上。请确保您的 Form1 看起来与图 5 相似。

Sample screenshot

图 5 – 添加控件后 Form1 的设计器界面

请按照表 2 设置控件的属性

表 2. Form1 上控件的属性设置

报告项 属性
Label1 文本 模式类型
Label2 文本 产品 ID
Label3 文本 文件系统
comboBoxPattern Collection Suggest, Append, SuggestAppend
comboBoxPattern DropDownStyle DropDownList
txtFileSystem AutoCompleteMode SuggestAppend
txtFileSystem AutoCompleteSource FileSystem

让我们编写一些 C# 代码来为 Form1 注入活力

大部分代码都写在 Form1Load 事件中。定义应应用哪种模式的指令写在 comboBoxPattern 的 selected index changed 事件中。请确保您的代码如下所示:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;
using System.Data.SqlClient;
using System.Collections;

namespace WinAutoComplete
{
    public partial class Form1 : Form
    {
        AutoCompleteStringCollection ProductList = new
            AutoCompleteStringCollection();

        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Load(object sender, EventArgs e)
        {
            //declare connection string
            string cnString = 
              @"Data Source=(local); Initial Catalog=northwind;" +
            "User Id=northwind;Password=northwind";

            /*use following if you use standard security
            string cnString = @"Data Source=(local);Initial 
            Catalog=northwind; Integrated Security=SSPI"; */

            //declare Connection, command and other related objects
            SqlConnection conGetData = new SqlConnection(cnString);
            SqlCommand cmdGetData = new SqlCommand();
            SqlDataReader drGetData;

            try
            {
                //open connection
                conGetData.Open();

                //prepare connection object to get the data through
                //reader and populate into dataset
                cmdGetData.CommandType = CommandType.Text;
                cmdGetData.Connection = conGetData;
                cmdGetData.CommandText = "Select ProductName From Products";

                //read data from command object
                drGetData = cmdGetData.ExecuteReader();

                if (drGetData.HasRows == true)
                {
                    while (drGetData.Read())
                        ProductList.Add(drGetData["ProductName"].ToString());
                }
                else
                    MessageBox.Show("No data found in Products tables");

                //close reader and connection
                drGetData.Close();
                conGetData.Close();

                //set the default pattern to SuggestAppend
                comboBoxPattern.SelectedIndex = 2;
                txtProductID.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
                txtProductID.AutoCompleteSource = AutoCompleteSource.CustomSource;
                txtProductID.AutoCompleteCustomSource = ProductList;
            }
            catch (Exception ex)
            {
                MessageBox.Show(ex.Message);
            }
            finally
            {
                //check if connection is still open then attempt to close it
                if (conGetData.State == ConnectionState.Open)
                {
                    conGetData.Close();
                }
            }
        }

        private void comboBoxPattern_SelectedIndexChanged(object sender, EventArgs e)
        {
            switch (comboBoxPattern.Text)
            {
                case "Suggest":
                    txtProductID.AutoCompleteMode = AutoCompleteMode.Suggest;
                    break;
                case "Append":
                    txtProductID.AutoCompleteMode = AutoCompleteMode.Append;
                    break;
                case "SuggestAppend":
                    txtProductID.AutoCompleteMode = AutoCompleteMode.SuggestAppend;
                    break;
            }
        }
   }
}

演出开始!

快点!我们已经完成了所有艰苦的工作,是时候收获果实了。让我们构建项目,看看您的项目是否与图 1 中所示的相同。那么,祈祷好运?准备好按键盘上的 F5 键了吗?

此时,我假设您的代码没有会导致构建失败的编译错误。现在继续,看看结果是什么样的。对我来说,我只能想象两种典型的情况:要么您会激动地大喊“”,要么低语一句“哎呀”。

无论哪种情况,我都与您同在。如果您说“是”,那么恭喜您,您成功了。这仅仅是开始,很快您就会发现自己能够轻松解决各种很酷的 AutoComplete 数据输入控件。现在,如果您说“哎呀”,那么不必惊慌,只需确保您已完成所有步骤。如果遇到重大问题,请从头开始。

Append

如果我们使用这种 AutoComplete 模式,那么最终用户将看到在按下每个键时附加的建议条目。例如,如果您键入“to”,您将得到“tofu”。有关 Append 模式的示例,请参见图 6。

Sample screenshot

图 6 – Append 模式示例

Suggest

如果我们使用这种 AutoComplete 模式,那么当按下每个键时,最终用户将看到建议的条目显示为更窄的选择。但是,产品 ID 字段不会被附加。例如,如果您键入“to”,则不会将“tofu”附加到 Product ID 文本框。有关 Suggest 模式的示例,请参见图 7。

Sample screenshot

图 7 – Suggest 模式示例

SuggestAppend

SuggestAppend 模式是 Suggest 和 Append 的结合。有关此模式的示例,请参见图 1。

结论

如您所见,这样一个简单的功能可以极大地赢得最终用户的信任并改善用户体验。除了提供自定义源之外,您还可以看到像文件系统这样的内置 AutoComplete 功能也有助于轻松完成数据输入。

感谢您的阅读;我真诚地希望本文能帮助您了解用户界面增强功能。欢迎随时通过 asif.blog@gmail.com 向我发送您的评论/建议。

© . All rights reserved.