Click here to Skip to main content
12,820,521 members (29,036 online)
Click here to Skip to main content
Add your own
alternative version


62 bookmarked
Posted 14 Dec 2005

Auto Suggest Using AJAX.NET Library

, 14 Dec 2005
Rate this:
Please Sign up or sign in to vote.
This article is about improvisations on implementing the Google Suggest functionality using the AJAX.NET library.


Sometime ago, I wrote an article in which I demonstrated how one can implement the Google Suggest functionality using the AJAX.NET library. This article takes one step forward and shows how to improve the functionality and select the suggestions using the arrow keys. The article is also supplemented with code which is provided at the end of the article.

Downloading the AJAX.NET Library

First of all, you need to download the AJAX.NET library created by Michael Schwarz. Now that you have downloaded the library and made the reference to the DLL in your project, we can start with some dirty stuff.

If you are not familiar on how to use the AJAX.NET library, than please visit my article AJAX In Action in which I explain in detail how to get started with the library.

Implementing the Server Side Methods

Let's start by implementing the server side methods. The server side methods will populate the collection with the data from the database. In this article, I am using the Northwind database which is installed as the default database for SQL Server 7 and SQL Server 2000 databases.

The first thing I will do is to get the data from the database. Let's see how this can be done.

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;

        dr = myCommand.ExecuteReader();

        while (dr.Read())
            if (dr["CategoryName"] != null)

    return categoryNameList;

The code above demonstrates how you can populate an ArrayList with the CategoryName column from the Northwind Categories table.

Now, let's see the Search method which searches the ArrayList for the word input by the user.


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;

The method that you want to call from the client side is marked with the [Ajax.AjaxMethod] attribute. First, I populate the ArrayList and then loop through the list to search for the word. Each time I find the word that starts with the same alphabet which the user has input, I concatenate the character to the word with the line break tag so that when they are displayed on the screen they are on different lines.

Client Side Methods

All the magic happens in the client side code. There are many client side methods and I will discuss some of the methods that are the most important. You can download the source code files which include the complete source code of the Auto-Suggest application. The method SearchWord shown below is the heart and soul of the application. In this method, I trap all the key-press events which include the Tab key event and the arrow-key events.

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) {

    // 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;

    // when the down arrow key is pressed
    else if(charCode == 40)
        if((_highlightSuggestionIndex+2) <= 
            _highlightSuggestionIndex = _highlightSuggestionIndex + 2;


    // When the up arrow key is pressed
    else if(charCode == 38)
        if((_highlightSuggestionIndex-2) >= 0) {
            _highlightSuggestionIndex = _highlightSuggestionIndex -2;

Another important method is SearchWord_CallBack(response). This method gets the response back from the server side method named 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);

There are several other methods which add different functionality to the application. You can download the complete source code and view the code in detail.

One thing that I would like to see is to change the background color of the rows of the suggestion menu when the arrow keys are pressed. If you implement this functionality, shoot me an email at and I will append it to this article.

I hope you like this article, happy coding!


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Web Developer
United States United States
I am the founder of knowledge base website, HighOnCoding, GridViewGuy, and

HighOnCoding is a website which will get you high legally with useful information. There are tons of articles, videos and podcasts hosted on HighOnCoding.

My Blog:


Buy my iPhone app ABC Pop

You may also be interested in...


Comments and Discussions

General"AutoSuggest" undefined Pin
Member 44821378-Jun-10 1:03
memberMember 44821378-Jun-10 1:03 
GeneralHi Pin
jaime862-Apr-09 3:57
memberjaime862-Apr-09 3:57 
GeneralGreat work buddy Pin
Nonu Walia14-Nov-08 2:25
memberNonu Walia14-Nov-08 2:25 
GeneralMicrosoft JScript runtime error: 'AutoSuggest' is undefined Pin
Gochi18-Apr-08 5:49
memberGochi18-Apr-08 5:49 
GeneralRe: Microsoft JScript runtime error: 'AutoSuggest' is undefined Pin
Ana D.14-Aug-09 10:33
memberAna D.14-Aug-09 10:33 
GeneralRe: Microsoft JScript runtime error: 'AutoSuggest' is undefined Pin
Tinhtam17-Feb-10 13:07
memberTinhtam17-Feb-10 13:07 
Generalauto suggest box Pin
Siva Myneni2-May-07 2:39
memberSiva Myneni2-May-07 2:39 
Generalsome improvements.. Pin
weinboerse10-Mar-06 1:44
memberweinboerse10-Mar-06 1:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170308.1 | Last Updated 14 Dec 2005
Article Copyright 2005 by azamsharp
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid