Introduction

In the present scenario, we need our text boxes to act more user friendly, so auto suggest is a feature that makes it more user friendly. Moreover the chance of making typo mistakes also reduces. This article will help you in adding a simple auto suggest feature using AJAX AutoCompleteExtender.

Background

A service is used to call the data from database. This autosuggest will populate top ten records on the basis of the letter entered by you. For example, if we type “A”, the top ten names beginning with the letter “A”, then we make it “An”, then top 10 beginning with “An”.

Using the Code

Code is populating auto suggest for a company. What we need from the service is the name of the company and its ID. So here is the method that we are writing in the service to get the top 10 companies starting with the text typed by the user in the TextBox.

The name of the service is “CompanyServiceForAutoSuggest” in which exists method GetCompanyList which includes two parameters:

“prefixText” the text to be searched to populate the autosuggest

“count” the maximum number of records in the auto suggest

The method returns an array string, which includes company name and its ID.

I have created a control, as it needs to be placed at many locations. The name of my control is ucCompany.

On the ucCompany.ascx page, write the following lines:

<asp:TextBoxID="txtAutoCompleteforCompany"name="txtAutoCompleteforCompany"runat="server"onblur="showMessage()"autocomplete="off"></asp:TextBox><ajaxtoolkit:TextBoxWatermarkExtenderID="txtAutoCompleteforCompany_waterMark"runat="server"TargetControlID="txtAutoCompleteforCompany"WatermarkText="Add New Company..."Enabled="true"></ajaxtoolkit:TextBoxWatermarkExtender><divid="listPlacement"class="cls_listPlacement"></div><ajaxtoolkit:AutoCompleteExtenderID="txtAutoCompleteforCompany_AutoCompleteExtender"MinimumPrefixLength="1"TargetControlID="txtAutoCompleteforCompany"CompletionSetCount="10"CompletionInterval="100"ServiceMethod="GetCompanyList"ServicePath="../UiHelper/CompanyServiceForAutoSuggest.asmx"runat="server"OnClientItemSelected="setCompanyMasterID"CompletionListElementID="listPlacement"></ajaxtoolkit:AutoCompleteExtender><inputtype="hidden"id="hdnCompanyMasterId"name="hdnCompanyMasterId"runat="server"value="0"/><inputtype="hidden"id="hdnCompanyName"name="hdnCompanyName"runat="server"value=""/>

ServicePath is the actual path where my service is saved. So my service will be called here. TargetControlID is the name of the control
on which auto suggest will display its result. OnClientItemSelected we are calling a JS function named "SetCompanyMasterID",
by using this method, I am setting the ID and Name in a hidden variable, to use them as and when required.

My control was placed inside another control. So I lost the value of ID and Name after the post back. So I wrote my JS method on server side and if the page load occurs, I call my JS method forcefully. In case you are using this control directly, then this step won’t be required.

Finally calling the control on a page, on the .cs file of the page, you can use:

// UcCompany is the ID of the control
string Company = UcCompany.GetCompanyName(); // To get the compnay name selected
int CompanyMasterID = UcCompany.GetCompanyMasterId();// To get the ID of
// the company selected using auto suggest

Points of Interest

So far, I have used various Auto suggest using JavaScript and jQuery, this was the first time I was asked by my client that he needs Ajax control only. So I have implemented and found it interesting too. Hope it helps you too to add Auto suggest feature using AJAX.

Is there any way you could post the entire Visual Studio solution, that is, the .sln file, the Web.config, and all the other files? I'm not able to get the downloaded code to build when I add it to a new VS 2010 ASP.NET solution. One thing that is needed for example, is the addition of

using System.Text;

for StringBuilder in ucCompany.ascx.cs. I'm getting compilation errors that suggest there is a problem with the Web.config file, or I am missing some source files.

I'm using Windows 7 and version 4.1.7.725 of the AjaxControlToolkit.dll

There is no explanation as to why the onblur() event of the textbox is mentioned in this article and yet does not appear in the source code. It is causing an error for me in my application. there also isn't any of the javascript in the source code.

I have used onBlur in my code as the requirement was, if user add something new which is not available in database, then a message should be shown that, this company does not exist and will be added as new. You can remove that onBlur event.

This post helped a lot! Thanks for the detailed post. However, when I tried to retrieve the data from the web service am getting some Javascript error (used in the AJAX AutoExtender saying anonymous function) and the dropdown effect is not happening to the textbox. It would really help any pointer to resolve this. I am pasting the error below.

But it seems my problem is something related to web service. In my case I am using 2 different projects one is having the web service and another is for my web site. I am giving the service path like ServicePath="http://localhost:55611/AutoComplete.asmx" in AutoCompleteExtender and inside ScriptManager's Services tag Path="http://localhost:55611/AutoComplete.asmx"

But when I add the Web service into the web site project it works fine. So I am a bit doubtful about the way I mentioned the service path in the above case. Is that the correct way?

I was trying to call the remote web service from AJAX, which was not allowed. I created a local web service and then from that called the remote web service(after adding the remote web service as a Web Reference), which resolved the problem. Explained just in case someone faces similar issue.