使用 AJAX.NET 库的自动建议

• 下载源代码 - 3.85 Kb

引言

不久前，我写了一篇文章，演示了如何使用 AJAX.NET 库实现 Google Suggest 功能。本文更进一步，展示了如何改进此功能并使用方向键选择建议。文章还附有代码，这些代码在文章末尾提供。

下载 AJAX.NET 库

首先，您需要下载 Michael Schwarz 创建的 AJAX.NET 库。现在您已经下载了该库，并在您的项目中引用了 DLL，我们可以开始做一些实际的工作了。

如果您不熟悉如何使用 AJAX.NET 库，请访问我的文章 AJAX 实战，我在其中详细解释了如何开始使用该库。

实现服务器端方法

让我们从实现服务器端方法开始。服务器端方法将使用来自数据库的数据填充集合。在本文中，我使用的是 Northwind 数据库，它是 SQL Server 7 和 SQL Server 2000 数据库的默认数据库。

我要做的第一件事是从数据库中获取数据。让我们看看如何做到这一点。

private ArrayList PopulateArrayList()
{
    ArrayList categoryNameList = new ArrayList();
    string query = "SELECT CategoryName FROM Categories";
    SqlConnection myConnection = new SqlConnection(ConnectionString);
    SqlCommand myCommand = new SqlCommand(query, myConnection);
    SqlDataReader dr = null;

    try
    {
        myConnection.Open();
        dr = myCommand.ExecuteReader();

        while (dr.Read())
        {
            if (dr["CategoryName"] != null)
            {
                categoryNameList.Add((string)dr["CategoryName"]);
            }
        }
    }
    finally
    {
        dr.Close();
        myCommand.Dispose();
        myConnection.Close();
    }

    return categoryNameList;
}

上面的代码演示了如何使用 Northwind Categories 表中的 CategoryName 列填充 ArrayList。

现在，让我们看看 Search 方法，该方法搜索 ArrayList 中用户输入的单词。

[Ajax.AjaxMethod]

public string Search(string searchString)
{
    string word = String.Empty;
    ArrayList wordList = new ArrayList();
    wordList = PopulateArrayList();

    /* You can put wordList in the Cache object
       to improve performance */

    foreach (string str in wordList)
    {
        if (str.ToLower().StartsWith(searchString.ToLower()) 
            && searchString != "")
            word += str + "<BR>";
    }

    return word;
}

你想从客户端调用的方法用 [Ajax.AjaxMethod] 属性标记。首先，我填充 ArrayList，然后循环遍历列表以搜索单词。每次我找到以用户输入的相同字母开头的单词时，我都会使用换行符标记将该字符连接到该单词，以便当它们显示在屏幕上时位于不同的行上。

客户端方法

所有的魔法都发生在客户端代码中。有很多客户端方法，我将讨论一些最重要的方法。您可以下载源代码文件，其中包含 Auto-Suggest 应用程序的完整源代码。下面显示的 SearchWord 方法是应用程序的核心。在此方法中，我捕获所有按键事件，包括 Tab 键事件和方向键事件。

function SearchWord(pressevent,keyValue)
{
    var charCode = (pressevent.which)? pressevent.which : (event.keyCode);

    // alert(charCode);

    // Send to the Server Side Method to get the string

    if(charCode >=65 && charCode <=90 || 
       charCode >= 97 && charCode <=122) {
        AutoSuggest.Search(keyValue,SearchWord_CallBack);
    }

    // if the backspace key (8) is pressed and 48 is for the delete button

    else if(charCode == 8 || charCode == 48)
    {
        // Reset the count

        _highlightSuggestionIndex = -2;
        AutoSuggest.Search(keyValue,SearchWord_CallBack);
    }

    // when the down arrow key is pressed

    else if(charCode == 40)
    {
        if((_highlightSuggestionIndex+2) <= 
            document.getElementById("Display").childNodes.length)
        {
            _highlightSuggestionIndex = _highlightSuggestionIndex + 2;
        }

        Highlight(_highlightSuggestionIndex);
    }

    // When the up arrow key is pressed

    else if(charCode == 38)
    {
        if((_highlightSuggestionIndex-2) >= 0) {
            _highlightSuggestionIndex = _highlightSuggestionIndex -2;
        }
        Highlight(_highlightSuggestionIndex);
    }
}

另一个重要的方法是 SearchWord_CallBack(response)。此方法从服务器端方法 Search 获取响应。

function SearchWord_CallBack(response)
{
    var word = response.value;

    if(response != null)
    {
        document.getElementById("Display").style.visibility = "visible";
        document.getElementById("Display").innerHTML = 
                    word.substring(0,word.length - 4);
    }
}

还有其他几种方法可以为应用程序添加不同的功能。您可以下载完整的源代码并详细查看代码。

我想看到的一件事是，当按下方向键时，更改建议菜单行的背景颜色。如果您实现了此功能，请给我发送电子邮件至 azamsharp_at_gmail.com，我将将其附加到本文中。

希望你喜欢这篇文章，祝你编码愉快！