使用 ASP.NET 2.0 客户端回调创建自动建议文本框

• 下载源代码 - 11.2 KB

引言

自动完成是一个非常有趣的功能，最初由 Google 推广。我已经写了几篇文章来解释如何实现此功能。在本文中，我将使用 ASP.NET 2.0 客户端回调来实现自动完成功能。

数据库设计

我将使用 Northwind 数据库，它是 SQL SERVER 7 和 SQL SERVER 2000 的默认数据库。

类图

我试图保持代码的组织性并实现不同的类。请看下面的类图

解释

• Product: Product 类是一个简单的实体类，它将 ProductName 公开为公共属性。
• ProductRepository: ProductRepository 负责对产品执行 CRUD 操作。
• CacheRepository: CacheRepository 用于将数据保存到 HttpCache 对象中。 这将避免不必要的数据库访问。
• HTMLTableHelper: 此类负责创建 HTML 表格。
• DataAccess: DataAccess 类用于访问数据库。
• GetProduct 方法: GetProduct 方法负责检索产品。

让我们看看代码

public static IList<Product> GetProducts(string criteria)
{
    string key = "Products_" + criteria[0];
    IList<Product> list = CacheRepository.GetObjects<Product>(key);
    if (list == null || list.Count == 0)
    {
        list = DataAccess.GetProducts(criteria);
        CacheRepository.SaveObject(key, list);
    }

    // return the list based on the criteria
    List<Product> productList = list as List<Product>;       
    list = productList.FindAll(delegate(Product product)
    {
        return product.ProductName.ToLower().StartsWith(criteria.ToLower());
    });
    return list;
}

GetProducts 方法将字符串变量 criteria 作为输入参数。 之后，会生成一个基于关键字 Products 和 criteria 的第一个字符的键。 这意味着如果您键入“C”，则生成的键将是 Products_C。 CacheRepository 使用该键在缓存中查找产品。 如果在缓存中找不到产品，则从数据库中检索它们。 否则，将从缓存中返回匹配的产品。 我使用了匿名方法来搜索列表中的匹配项目。

list = productList.FindAll(delegate(Product product)
{
    return product.ProductName.ToLower().StartsWith(criteria.ToLower());
});

CacheRepository 只是简单地从缓存中保存和检索项目。 看一下它公开的两个方法

public static IList<T> GetObjects<T>(string key)
{
    IList<T> list = (IList<T>) HttpContext.Current.Cache[key];
    return list;       
}

public static void SaveObject(string key, object obj)
{
    HttpContext.Current.Cache.Insert(key, obj);
}

注册客户端回调

为了使用 ASP.NET 2.0 客户端回调功能，您首先需要注册它。 请看下面的代码，它注册了客户端回调。

private void RegisterClientCallbacks()
{
    string callbackRef = ClientScript.GetCallbackEventReference(this, "arg", 
        "RecieveServerData", "context");
    string script = String.Empty;
    if (!ClientScript.IsClientScriptBlockRegistered("CallServer"))
    {
        script = "function CallServer(arg,context) { " + callbackRef + "}";
        ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", 
            script, true);
    }
}

实现客户端脚本

现在，让我们看看用于触发服务器端方法的客户端代码。 当用户在文本框中键入一些文本时，将触发回调方法。 文本框 onKeyDown 事件负责调用服务器方法。

输入搜索文本：<input type="text" onkeydown="return GetProducts(event)" id="txtSearch" name="txtSearch" />

JavaScript GetProducts 函数根据击键将请求发送到适当的函数。

function GetProducts(e)
{
    var keynum
    var keychar
    var numcheck

    if(window.event) // IE
    {
        keynum = e.keyCode
    }
    
    else if(e.which) // Netscape/Firefox/Opera
    {
        keynum = e.which
    }

    keychar = String.fromCharCode(keynum)
    numcheck = /\d/

    // If the down key is pressed

    if(keynum == DOWN)
    {  
        MoveCursorDown();   
        return;
    }
    
    else if(keynum == UP)
    {  
        MoveCursorUp();   
        return;
    }

    else if(keynum == ENTER)
    {
        if(IsFireFox())
        {
            document.getElementById("txtSearch").value = 
                selectedRow.childNodes[1].innerHTML;
        }

    else
    {
        document.getElementById("txtSearch").value = selectedRow.innerText;
    }

    document.getElementById("results").innerHTML = '';

    // false is returned so that the postback won't occur when 
    // the return key is pressed
    return false;
}

if(keynum != DOWN && keynum != UP && keynum >= 65 && keynum <= 90)
{
    word = word + keychar;
}

else if(keynum == BACKSPACE)
{
    word = word.substring(0,word.length-1);
}

// Call the server side method
CallServer(word,'');
}

让我们看看 MoveCursorDown 函数，该函数在用户从键盘按下向下箭头键时触发。

function MoveCursorDown()
{
    selectedRow = null;
    table = document.getElementById("MyTable");
    if(table == null) return;
    rows = table.getElementsByTagName("TR");
    if(index < rows.length)
    {  
        if(index < rows.length -1)
        {
            index++;      
            SetDefaultRowColor();         
            selectedRow = rows[index];
            selectedRow.className = 'HighlightRow';  
        }
    }
}

正如您在上面的代码中看到的，首先我检查索引是否小于总行数减 1。 如果是这种情况，则 selectedRow 将以不同的颜色突出显示。 请看下面的屏幕截图

此演示中使用了更多的 JavaScript 代码。 所有代码都可以在本文顶部下载。

类似文章

• 使用 AJAX.NET 库自动建议
• 使用 AJAX 的 Google Suggest 功能

结论

自动完成对于任何网站来说都是一个非常方便的功能。 它使用户无需逐步迭代即可搜索数千条记录。

历史

• 2007 年 6 月 15 日 -- 发布原始版本