Basic AJAX search suggestion box that can be modified to work with Arrays, Databases, or XML. C#. AJAX has become extremely popular in the web development community. In this tutorial, we will be showing you how to use basic Javascript and C# to implement a search suggestion box. The script will use a TextBox to search through a string array instantly to return results without reloading the page. Every typed letter will update the results.

First, we start off with a Web Application Project in Visual Studio .NET. Then we will add a few extensions from the AJAX toolbox that are required for all pages that manipulate data without being reloaded. The 2 extensions needed from the AJAX extensions in the toolbox are ScriptManager and UpdatePanel. These need to be added between the

tag which is in the tag. You will need to add a TextBox in between the tags. This TextBox will be used to type in the search terms. Lastly we will need to add a Repeater. This Repeater accepts a DataSource and writes each row of the DataSource in between the tags with the <%# Container.DataItem %> tag. This Repeater is fairly simple and prints out each search result on a new line.

Notice I also added a TextBox and Repeater inside of the tags. This must be placed inside of this tag or the page will be forced to refresh. The point of this tutorial is to show the results without refreshing the page.

Now we will begin writing the C# that uses the TextBox and Repeater on the aspx page. The Page_Load method is the first method processed when the page is opened. In this method we are creating the search suggestions in the string array called theList. For this example I have used various common first names. The next two items add specific attributes to the TextBox. The first adds an attribute called OnKeyUp. This calls blur() then the focus() function after a character has been typed or deleted in the search box. The purpose of this is to trigger the C# TextChanged event which is only triggered when the TextBox loses focus. Since the user may not be finished typing, the focus is quickly returned to the TextBox. The second adds an attribute called OnFocus. This calls the SetEnd function that we will put into a Javascript Script tag later in the tutorial.

The updateList() function will be used to bind a modified string array to the Repeater we created earlier. The function first makes an empty array. This array is added with elements (specifically names in our example) that match the search criteria in the TextBox. If the TextBox is empty, then it will copy all the elements into the new array. Finally this array is binded to the repeater and eventually written out to the webpage.

The last function is called TextBox1_TextChanged(). This function is a C# trigger on the TextBox. When the text inside of the TextBox is changed and then loses focus, it will run the UpdateList() function. This will update the suggestion list everytime the user enters a new letter into the TextBox. Note that this is only triggered after the TextBox loses focus not when a new character is typed or deleted. Our Javascript in the attributes of the TextBox that we previously added allow us to overcome this hurtle.

The code behind the aspx page should look like this:

Now our search page is almost finished. The final touches involve the minor problem of the TextBox being refocused to allow the user to continue typing. When a form element is normally refocused, the cursor is placed at the beginning of any text already inside of the TextBox. Due to the fact that it would be highly irritating to press the End key after each letter, we fixed this problem with some minor Javascript. The function will be add inside the script tag inside of the tag. This function changes the cursor from the beginning of the text inside of the TextBox to the end. Now when a user is typing, the cursor will automatically be placed at the end so they can continue typing without interruption.

You will need to add this Javascript code to the inside of the tag in the aspx page you are using:

Download Source Files