This tutorial was created with and aimed toward users of Visual Studio.NET 2008. 2005 can be used, but Microsoft’s ASP.NET AJAX Extensions, which can be downloaded at this location, must be installed.
Also, if using VS.NET 2005, some additional steps may be required that are not listed in this article.

Microsoft have a Control Toolkit that is not included with the .NET Framework, but can be downloaded from www.codeplex.com/AjaxControlToolkit. This Toolkit is constantly being updated and consists mainly of AJAX Extenders for existing ASP.NET Controls.
By now, you are bound to have seen Google’s implementation of the AutoComplete AJAX control for commonly searched terms. The Google search box will now offer you commonly searched for phrases as you type! This means that the form will guess what you are typing, and provide matches for you to choose.

In this tutorial, you will learn how to implement something similar using the AutoComplete AJAX Control and a Web Method.
We will be using a SQL database to match the typed text against and retrieve matches to the user.

  1. We start by creating the database. Open up a new VB.NET web application project in Visual Studio, then right-click the App_Data folder in Solution Explorer and choose Add New Item.. SQL Server Database. We will create one table with two columns – id, name. We will create a database of names. For this example, it will not be a comprehensive list of names, but we will add some sample data once we have designed the table.
  2. We set the id to data type int, and name to data type varchar(50). We also set the id column as Primary Key and Identity Specification, then save the table and close.
  3. Next, right-click the project in Solution Explorer and choose Add ASP.NET Folder > App_Code. Then right-click the App_Code folder and Add New Item.. LINQ to SQL Classes. We will create a class to represent our database table so that we can use LINQ to retrieve records from our database as we type.
  4. We should be presented with the Object Relation Designer.
  5. Here, we can goto Server Explorer and drag our table to the design view, then save.
  6. This will allow VS to create the class representation for us. We will then use LINQ to interact with this class and then save the changes back to the database.
  7. Next, we will build our Web Method in the back-end of our ASPX page. Let’s start by making sure we are referencing the LINQ namespace:
Imports System.Linq

We can then create our Web Method like so:

<System.Web.Services.WebMethod()> _
Public Shared Function GetNames(ByVal prefixText As String, ByVal count As Integer) As String()

Dim db As New NamesDataContext()
Return db.tblNames.Where(Function(n) n.name.StartsWith(prefixText)).OrderBy(Function(n) n.name).Select(Function(n) n.name).Take(count).ToArray()

End Function

Here we are creating a Web Method within the page. We could create this as a Web Service, but for this example we are only using it on this page.
We first instantiate our LINQ to SQL Class we created earlier, then we use Lambda Expressions to select data from the database that match what the user is typing in. This method will be called from the AJAX AutoComplete Extender when the user types into the textbox. The AJAX Extender will maange the calling of the method, and also the retrieval of the string array.

We will also have a button that will move the chosen suggested text to a label:

Protected Sub butName_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles butName.Click

lblChosenName.Text = “You chose the name ” & txtName.Text & “.”

End Sub

Our entire code-behind will look something like this:

Imports System.LinqPartial Class _Default

Inherits System.Web.UI.Page<System.Web.Services.WebMethod()> _
Public Shared Function GetNames(ByVal prefixText As String, ByVal count As Integer) As String()

Dim db As New NamesDataContext()
Return db.tblNames.Where(Function(n) n.name.StartsWith(prefixText)).OrderBy(Function(n) n.name).Select(Function(n) n.name).Take(count).ToArray()

End Function

Protected Sub butName_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles butName.Click

lblChosenName.Text = “You chose the name ” & txtName.Text & “.”

End Sub

End Class

Now we have built our Web Method, we will implement it into our ASPX page. We will first add the following ASP.NET Controls: a TextBox, Button and Label. Also make sure there is a ScriptManager, and an UpdatePanel if you want the form to make use of Asynchronus Postbacks.

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”SM1″ runat=”server” /><asp:UpdatePanel ID=”UP1″ runat=”server”>
<ContentTemplate>

Name:
<asp:TextBox ID=”txtName” runat=”server” />
<br />
<asp:Button ID=”butName” runat=”server” Text=”Go” onclick=”butName_Click” /><br />
<br />
<asp:Label ID=”lblChosenName” runat=”server” />

</ContentTemplate>
</asp:UpdatePanel>

</form>

Now if we go into Design view of our ASPX page, we can click on the SmartTag of the TextBox and choose Add Extender. This will only be available if we have the AJAX Toolkit installed.
Once you choose to Add Extender, you can choose the AutoComplete option. This will add a Custom Control to the page, named AutoCompleteExtender. We need to set the ServiceMethod attribute to the name of our Web Method, and also set the TargetControlID to that of the TextBox we will be using. Setting AutoComplete=Off on the textbox will turn off the built-in autocomplete in IE and FireFox.

<form id=”form1″ runat=”server”>

<asp:ScriptManager ID=”SM1″ runat=”server” /><asp:UpdatePanel ID=”UP1″ runat=”server”>
<ContentTemplate>

Name:
<asp:TextBox ID=”txtName” runat=”server” AutoComplete=”Off” /><cc1:AutoCompleteExtender ID=”txtName_AutoCompleteExtender” runat=”server”

TargetControlID=”txtName” MinimumPrefixLength=”1″ ServiceMethod=”GetNames”>

</cc1:AutoCompleteExtender>
<br />
<asp:Button ID=”butName” runat=”server” Text=”Go” onclick=”butName_Click” /><br />
<br />
<asp:Label ID=”lblChosenName” runat=”server” />

</ContentTemplate>
</asp:UpdatePanel>

</form>

The AutoComplete Extender is also smart enough to provide caching – it will detect if the search term has been previously entered, and if so, it will not need to make another call to the database; it will retrieve results from cache.

 
Comments
LV said:

Thanks for this tutorial, I’ve been trying to find a simple way to implement this over the past few weeks without any luck, until I found yours. Your method is simple and the attached sample is a big plus.

Cheers! Thanks a gain and keep up the good work for newbies like me.

Posted Nov 4, 2008 3:42 PM
LV said:

Just a quick question, is there any performance issues using a large Database with thousands of records for the returned suggestions? my test DB contains 5,000 plus records with about 20 plus Data fields and the tests I’ve done on my PC with just me using the BD, I can’t see any performance issues. Do you know by any chance if this will cause major problem for multi-users app? Thanks in advance for any feedback

Posted Nov 4, 2008 3:46 PM
RP said:

I could not get this to work. It returns the data from the data base but does not display it in the textbox. All the other stuff works. Whatever is typed in is displayed in the lblChosenName label

Posted Nov 10, 2008 4:34 PM
RP said:

I could not get this to work. It returns the data from the database but it does not put it in the text box. Whatever was typed in the textbox is displayed in the label. the TargetControlID of the AutoCompleteExtender is the ID of the textbox.

Any ideas?

Posted Nov 10, 2008 4:36 PM
Heval Challi said:

Thanks for this tutorial. I have added 1 more column (phone)to the table which shows the phone #. Could you please let me know how to retrive the name and phone number together of a person?

Thanks again.

Posted Nov 18, 2008 1:00 PM
Darren said:

Work like a treat.

Thanks for the tutorial. how would I convert this to a webservice?

regards

Posted Nov 27, 2008 12:30 PM
Tanuj said:

What is the meaning of this code

Dim db As New NamesDataContext()

Return db.tblNames.Where(Function(n) n.name.StartsWith(prefixText)).OrderBy(Function(n) n.name).Select(Function(n) n.name).Take(count).ToArray()

In my case it is giving error NamesDataContext() not defined.

Thanks

Posted Jul 3, 2009 7:51 AM
Jonathan said:

i would agree with tanuj, its giving me namesdatacontext not defined………

Posted Jul 7, 2009 12:59 PM
Philip Keefer said:

THANKS! Works like a charm and is just what I needed.

Posted Apr 30, 2010 2:51 PM
kumar said:

i want this code in C# please post replay

Posted Apr 15, 2011 8:17 AM
www.gucci2you.com said:

Posted Aug 6, 2011 3:39 AM
Advertisements