边输入边查看搜索结果 - 一个 ASP.NET AJAX 控件

• 下载源代码 - 531 KB (VS 2008 项目)
• 下载演示 - 629 KB (VS 2008 项目)

引言

Highrise 和其他新的 AJAX 启用工具具有此功能：当您键入搜索查询时，它会自动更新下面的搜索结果。它几乎就像一个自动完成框，但是将完整的结果显示在页面上，而不是在控件下面的下拉列表中。不幸的是，我在 Microsoft ASP.NET AJAX 工具包中没有找到类似的东西。因此，我决定这是一个最终深入研究 AJAX 控件工具包的好方法。

这是结果：在线演示。

这是我的第一个 AJAX 控件，所以我相信还有改进的空间。 我已经在 Internet Explorer 7，Firefox 和 Safari 中对其进行了测试。 似乎在所有浏览器中都可以正常工作。

背景

我使用了 Peter Keller 的 Membership Editor Example 和 Garbin 的 TextChangedBehavior.js 作为我的灵感和资源，但是从 VS ASP.NET AJAX 控件项目开始，以启动并运行该框架。

使用案例

用户开始在文本框中键入其搜索查询。 在他键入他正在寻找的关键字的前几个字符之后，他暂停了。 神奇的是，到目前为止，符合其查询的所有搜索结果都显示在下面。 如果他键入更多关键字，则结果会相应更新。

示例：用户正在搜索联系人。 他输入 Bl 并停止。 现在显示的名称可能包括

• Blaettler
• Blatt
• Blackmore
• Bloomfield
• Blodgett
• Blum

现在，他输入另一个字母，例如 o，列表减少到

• Bloomfield
• Blodgett

控件

实际上，只有 JavaScript 代码具有功能。 代码唯一要做的就是在 keyup 事件上启动计时器，在 keydown 上停止计时器，并且在计时器触发后，它将执行关联的 TextBox 的 onchange 方法。 这样，我们就可以在用户停止键入之后获得延迟的回发，而不是在他仍在写东西时进行大量回发。

_onkeyup : function(ev) {
    var k = ev.keyCode ? ev.keyCode :
                ev.rawEvent.keyCode;
    if (k != Sys.UI.Key.Tab) {
        this._timer.set_enabled(true);
    }
},

_onkeydown : function(ev) {
    this._timer.set_enabled(false);
},

_onTimerTick : function(sender, eventArgs) {
    this._timer.set_enabled(false);

    if(this._text != this.get_element().value) {
        this._text = this.get_element().value;

        this.get_element().onchange();
    }
},

其他一切都只是设置和拆卸代码。 C# 文件中有一个名为 Timeout 的属性。 这确定用户需要暂停多长时间才能更新搜索结果。

Using the Code

就像其他扩展器一样，将此控件添加到您的 ASPX 页面，设置 TargetControlID，然后将 TextChanged 处理程序添加到搜索文本框。

<cc1:DelayedSubmitExtender 
    ID="DisableButtonExtender1" 
    runat="server" 
    Timeout="1000" 
    TargetControlID="TextBox1"/>
<asp:TextBox 
    ID="TextBox1" 
    runat="server" 
    AutoPostBack="True" 
    OnTextChanged="TextBox1_TextChanged" 
    Columns="50"></asp:TextBox>        
<br />
List of matching words:<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TextBox1" />
    </Triggers>
    <ContentTemplate>
        <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate><ul></HeaderTemplate>
            <ItemTemplate>
                <li><%#DataBinder.Eval(Container, "DataItem[0]")%></li>
            </ItemTemplate>
            <FooterTemplate></ul></FooterTemplate>
        </asp:Repeater>
    </ContentTemplate>
</asp:UpdatePanel>

然后，我会将搜索结果区域包装在 UpdatePanel 中。 如果 TextBox 在外部，只需将 AsyncPostBackTrigger 添加到 UpdatePanel。 在 UpdatePanel 内部，您可以显示搜索结果。 对于我的示例，我只显示单词列表。

后台代码

protected void TextBox1_TextChanged(object sender, EventArgs e)
{
    List<string[] /> items = new List<string[] />();

    for (int i = 0; i < wordlist.Length; i++ )
    {
        if (wordlist[i].StartsWith(
                TextBox1.Text, 
                StringComparison.OrdinalIgnoreCase))
        {
            string[] item = new string[1];
            item[0] = wordlist[i];

            items.Add(item);
        }
    }

    Repeater1.DataSource = items;
    Repeater1.DataBind();
}

在服务器端的 TextChanged 处理程序中，您需要添加特定的搜索代码。 如上所述，我只显示带有 Repeater 控件的单词列表。 该列表包含在名为 wordlist 的 string 数组中。

我建议您看一下示例。 这很简单，应该向您展示它是如何工作的。

请告诉我它如何工作以及是否有用。 祝你好运！