为 ASP.NET 应用程序添加“Google Suggest”功能

• 下载演示项目 - 143 Kb
• 下载源代码 - 5.38 Kb

引言

本文的目的是展示如何使用免费的 AutoSuggestBox 控件为您的 ASP.NET 应用程序添加“Google Suggest”功能。网上有很多文章解释了如何做到这一点，但通常只有大量的理论而没有太多易于添加到您的应用程序中的代码。 AutoSuggestBox 封装了所有复杂的功能，只需要开发人员指定用于加载自动建议菜单的数据源。

背景

您见过 Google Suggest 吗？它是 Google 创建的一个应用程序，展示了 AJAX 的强大功能。第一次看到它确实令人惊叹，但过了一会儿，其新奇感就会消失，大多数开发人员都会忘记它。虽然许多人承认它的“酷”因素，但他们不知道如何将其集成到其他 Web 应用程序中。

第一次看到这个控件时，我的感觉也是如此。多么棒的主意，但我却无用武之地。几个月前，我开始开发一个名为“Travelope”（参见此处）的旅行应用程序。在处理机票搜索表单时，我正在考虑一个用于选择出发地和目的地位置的简单界面。我考虑过使用组合框，但有数千个城市，因此表单加载会花费很长时间。另一种选择是使用一个文本框，并带有链接以弹出城市查找窗口。这需要用户每次忘记拼写时都打开一个参考窗口，因此也不是一个好的选择。我开始查看其他旅行网站寻找灵感。其中许多网站都使用了类似“Google Suggest”的控件来选择城市和机场。我认为这对“Travelope”来说也很完美。这就是 AutoSuggestBox 的诞生。

使用代码

什么是 AutoSuggestBox？

AutoSuggestBox 是一个用 C# 编写的自定义控件，可以轻松地为您的 Web 应用程序添加类似“Google Suggest”的功能。它支持 C# 和 VB.NET，并且可以在 Internet Explorer 和 Firefox 中运行。该控件利用 AJAX 在不刷新整个页面的情况下检索数据。开发人员可以使用 CSS 来调整 Web 页面上控件的外观和感觉。

将 AutoSuggestBox 添加到您的 Web 应用程序

从 此处下载适当的 AutoSuggestBox 包。您需要将四个文件添加到您的应用程序才能使用 AutoSuggestBox。

• AutoSuggestBox.dll -- 包含控件。
• AutoSuggestBox.js -- 用于 AJAX 支持的 JavaScript 方法。
• AutoSuggestBox.css -- 自动建议菜单的外观和感觉。
• GetAutoSuggestBox.aspx -- 返回包含建议项的 HTML。

首先，添加对“AutoSuggestBox.dll”的引用。然后在 Web 应用程序的根目录下创建一个名为“asb-includes”的子目录。将其他三个文件复制到新子目录中。

更详细的说明请参见 此处。

指定用于加载自动建议菜单项的数据类型

当用户开始在 AutoSuggestBox 中键入时，您需要为建议值提供数据源。系统允许您的应用程序根据需要使用任意数量的数据源。例如，您可以为“城市”建议框设置一个数据源，为“机场”设置另一个数据源。

要添加数据源，您需要修改“GetAutoSuggestData.aspx”文件。默认情况下，该类实现“City”数据源。“LoadMenuItems”包含一个用于加载不同类型数据的 switch 语句。

private ArrayList LoadMenuItems(string sDataType, string sKeyword) 
{
    ArrayList aMenuItems;

    switch(sDataType)
    {
        case "City":
            aMenuItems=LoadCities(sKeyword);
            break;
        default:
            throw new Exception("GetAutoSuggestData  Type '" + 
                      sDataType + "' is not supported.");
    }
    return aMenuItems;
}

“LoadCities”方法根据用户输入的字符从数据库检索建议的城市。它加载以指定关键字开头的 10 个城市。然后，它生成一个 ASBMenuItem 数组并用数据库中的结果填充它。

private ArrayList LoadCities(string sKeyword)
{
    ArrayList aOut=new ArrayList();

    string sConnString="Provider=Microsoft.Jet.OLEDB.4.0;" + 
           "Data Source=c:\\databases\\AutoSuggestBox_Demo.mdb;" + 
           "User Id=admin;Password=;";
    OleDbConnection oCn=new OleDbConnection(sConnString);

    string sSql="SELECT TOP 10 tblCity.Name as CityName, " +
                "tblCity.Code as CityCode, " +
                "tblCountry.Name as CountryName, " +
                "tblState.Name as StateName " + 
                " FROM (tblCity INNER JOIN tblCountry" + 
                " ON tblCity.CountryID=tblCountry.ID) " +
                " LEFT OUTER JOIN tblState" + 
                " ON tblCity.StateID=tblState.ID " + 
                " WHERE (tblCity.Name LIKE '" + 
                sKeyword.Replace("'", "''") + "%') " +
                " ORDER BY tblCity.Name";

    OleDbCommand oCmd = new OleDbCommand(sSql, oCn);
    oCn.Open();

    OleDbDataReader oReader = oCmd.ExecuteReader();

    string sCity;
    string sCityCode;
    string sState;
    string sCountry;
    
    string sLabel;

    ASBMenuItem oMenuItem;

    while (oReader.Read())
    {
        //Build label using City, Country & State

        sCity        =oReader.GetString(0);
        sCityCode    =oReader.GetString(1);
        sCountry    =oReader.GetString(2);

        if (oReader.GetValue(3)==System.DBNull.Value)
            sState="";
        else
            sState=oReader.GetString(3);
        

        sLabel=sCity;
        
        //Append either state or country

        if (sState != "")
            sLabel+=", " + sState;
        else
            sLabel+=", " + sCountry;
        
        oMenuItem=new ASBMenuItem();
        oMenuItem.Label=sLabel;
        oMenuItem.Value=sCityCode;
        
        aOut.Add(oMenuItem);
    } 

    oReader.Close();
    oCn.Close();

    return aOut;
}

如果您需要添加其他数据源，只需向 LoadMenuItems 函数添加更多的 case 语句即可。

将 AutoSuggestBox 控件插入 Web 窗体

1. 创建或打开一个已有的 Web 窗体。
2. 在 ASPX 页面的顶部添加以下行

   <%@ Register TagPrefix="Custom" Namespace="ASB" Assembly="AutoSuggestBox" %>

3. 在建议框出现的位置添加以下行

   <Custom:AutoSuggestBox id="Control ID" 
            DataType="Supported Data Type" runat="server" 
            CssClass="Text Box Style" 
            MaxLength="Max chars in TextBox" 
            Columns="Num of visible chars"/>

   例如

   <Custom:AutoSuggestBox id="asbCity" DataType="City" 
               runat="server" CssClass="FormCtrlStyle" 
               MaxLength="100" Columns="30"/>

4. 确保 DataType 属性的值已在“GetAutoSuggestData.aspx.cs”中实现。参见上一节。
5. 如果您的 Web 应用程序不在 Web 服务器的根目录下运行（例如，https:///WebApp），则需要在 AutoSuggestBox 标记中添加另一个属性。

   <Custom:AutoSuggestBox id="asbCity" 
            DataType="City" runat="server" CssClass="FormCtrlStyle" 
            MaxLength="100" Columns="30" 
            ResourcesDir="/WebApp/AutoSuggestBox"/>

   注意：默认情况下，ResourcesDir 为“/asb_includes”。

它是如何工作的

当用户开始在控件中键入文本时，JavaScript 会处理 OnKeyUp、OnKeyDown 和 OnKeyPress 事件。然后，AJAX 用于与服务器进行通信，以便每次单击时检索建议条目列表。

因此，事件流程如下

1. 用户在 AutoSuggestBox 控件获得焦点时按下按键。
2. JavaScript 检查用户是否输入了向上/向下/回车键或任何其他字符。
   • 如果用户输入了向上/向下键并且建议菜单可见，则会选中相应的菜单项。
   • 如果用户单击了“回车键”，建议菜单会变得不可见，同时当前选中的项会被填入建议框。
3. 如果用户输入了字母数字字符，JavaScript 会将 XmlHttpRequest 发送到服务器上的 GetAutoSuggestData 页面。
4. “GetAutoSuggestData.aspx”页面获取文本框的当前值和要检索的数据类型。它通常会生成一个查询以从数据库中检索建议值。然后，它使用查询结果创建建议菜单的 HTML 并将其返回到页面。
5. Web 页面检索更新后的“建议菜单”并将其显示在旧菜单的位置。

结论

在本文中，我们演示了如何使用免费的 AutoSuggestBox 控件轻松地为您的 Web 应用程序添加“Google Suggest”功能。

编程愉快！！！

关注点

• Travelope -- 一个实现了 AutoSuggestBox 的旅行引擎。
• AutoSuggestBox 站点 -- 包含与 AutoSuggestBox 控件相关的所有信息、演示和下载。
• Google Suggest -- 这一切的起点。