AJAX 自动完成/自动建议文本框

• 下载演示项目和源代码 - 340.0 KB

引言

这是一个我很久以前创建的 AJAX AutoSuggest ASP.NET 文本框。它构建在 Anthem.NET 库之上。

背景

在构建企业 Web 应用程序时，我们经常需要让用户从大量记录中选择一项。例如，在订单录入表单中，用户必须能够从大量客户列表中选择客户。出于性能原因，将 50000 个项目的 DropDownList 加载进去是不可行的。另一种选择是打开另一个表单，用户可以在其中搜索并选择所需的客户。我之前使用过这种方法，但用户通常觉得它非常烦人，并且不断要求更好的解决方案。

解决方案

AJAX 的兴起使得这个问题很容易解决。一个 AutoSuggest 文本框，用户可以输入部分客户名称，控件就会显示匹配项，这非常适合这种情况。然而，我找不到一个完全满足我需求的。我需要一个具有以下功能的 AutoSuggest 文本框：

• 内置验证
• 基于模板的内容
• 能够绑定到各种对象（集合、数据表等）
• 能够像 DropDownList 一样工作
• 与 Anthem.NET 顺畅集成
• 能够显示标题
• 无需调用 Web 服务

控件

这个自定义控件基于 Anthem 库。我决定使用 Anthem，因为当时我已经在我的项目中使用它了。Atlas 项目尚不成熟，而 Anthem 显得更简单、更强大。Anthem 库现在有一个官方的 AutoSuggest 控件，但我还没有测试过。如果您还不熟悉 Anthem.NET，我鼓励您查看一下。它相当简单，而且效果很好。JavaScript 面向对象模型是基于我在这个网站上找到的另一个免费 AutoSuggest 控件。我觉得它很不错，但缺少我需要的一些功能。

设置

要使用此 AutoSuggest 控件，您需要在项目中引用 Anthem.dll 和 Anthem.AutoSuggest.dll。下载文件包含这些 DLL、AutoSuggest 源代码以及一个示例项目源代码。

Using the Code

您需要做的第一件事是将控件添加到您的页面。这可以通过拖放完成，或者通过在 ASPX 源文件中直接编写标签来完成。由于我没有添加任何相关的设计时支持，我认为最好坚持使用 ASPX 源文件。在此示例中，我们使用 AutoSuggest 控件来显示各种乐队的名称，用户必须选择他最喜欢的乐队。

<Anthem:AutoSuggestBox runat="server" 
    ID="asbFavoriteBand" DataKeyField="ID" 
    TextBoxDisplayField="Name" AutoCallBack="true" 
    ItemNotFoundMessage="Item not found!" >
    <itemtemplate>
        <%# ((Band)Container.DataItem).Name %>
    </ItemTemplate>
</Anthem:AutoSuggestBox>

我认为大多数属性名称都是不言自明的。我鼓励您浏览这些属性并进行尝试。对于不熟悉 Anthem.NET 库的用户，AutoCallBack 属性表示在选定值更改后，控件将触发一个回发到服务器。它相当于常规 ASP.NET 控件的 AutoPostBack 属性。请注意，您可以像在 Repeater、DataList 或 DataGrid 控件中使用 ItemTemplate 一样使用它。DataKeyField 属性告诉控件使用哪个字段来设置 SelectedValue 属性。

将控件添加到页面后，您应该设置事件处理程序。您应该处理的最重要的事件是 TextChanged 事件。您将在其中填充建议列表。另一个重要的事件是 SelectedValueChanged。每当您更改当前值时，都会触发此事件。要连接这些处理程序，您可以在 OnInit 方法中编写以下代码：

protected override void OnInit(EventArgs e)
{
    base.OnInit(e);
    this.asbFavoriteBand.TextChanged += 
        new Anthem.AutoSuggestBox.TextChangedEventHandler(
        asbFavoriteBand_TextChanged);

    this.asbFavoriteBand.SelectedValueChanged += 
        new Anthem.AutoSuggestBox.SelectedValueChangedHandler(
        asbFavoriteBand_SelectedValueChanged);
}

这是处理 TextChanged 事件的代码

void asbFavoriteBand_TextChanged(object source, 
        Anthem.AutoSuggestEventArgs e)
{
    //Creates a dataview from a datatable

    DataView dv = new DataView(_dtBands);

    //Filters the datatable based on the CurrentText property

    dv.RowFilter = string.Format("BandName LIKE '%{0}%'", e.CurrentText);

    //Sets the dataview as the control's datasource

    asbFavoriteBand.DataSource = dv;
    asbFavoriteBand.DataBind();
}

在上面的代码片段中，您可以在 AutoSuggest 控件中使用任何数据源。通常，您会从数据库查询结果集。当您调用 DataBind 方法时，建议列表将显示在屏幕上。

关注点

当然，此控件的一些优点值得深入研究 .NET 控件的工作原理，例如使用嵌入式 Web 资源（图像、JavaScript 和 CSS 文件）、支持基于模板的内容、触发事件以及处理 JavaScript 集成。

面向对象的 JavaScript 也值得一看。它确实使事情变得更轻松。