Using Ajax AutoCompleteExtender For Autosuggest

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:TextBox ID="txtAutoCompleteforCompany" name="txtAutoCompleteforCompany" runat="server" onblur="showMessage()" autocomplete="off"></asp:TextBox>
<ajaxtoolkit:TextBoxWatermarkExtender ID="txtAutoCompleteforCompany_waterMark" runat="server" TargetControlID="txtAutoCompleteforCompany"
WatermarkText="Add New Company..."Enabled="true">
</ajaxtoolkit:TextBoxWatermarkExtender>
<div id="listPlacement" class="cls_listPlacement"></div>
<ajaxtoolkit:AutoCompleteExtender ID="txtAutoCompleteforCompany_AutoCompleteExtender"
MinimumPrefixLength="1" TargetControlID="txtAutoCompleteforCompany"
CompletionSetCount="10"CompletionInterval="100"
ServiceMethod="GetCompanyList"
ServicePath="../UiHelper/CompanyServiceForAutoSuggest.asmx"
runat="server" OnClientItemSelected="setCompanyMasterID"
CompletionListElementID="listPlacement">
</ajaxtoolkit:AutoCompleteExtender>
<input type="hidden" id="hdnCompanyMasterId"
name="hdnCompanyMasterId" runat="server" value="0" />
<input type="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. TargetControlIDis 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.

Add the script tag in ucCompany.ascx and define the js function:

<script type="text/javascript">
function setCompanyMasterID(source, eventargs)
{
document.getElementById ("hdnCompanyMasterId.ClientID").value =
eventargs.get_value();
document.getElementById ("hdnCompanyName.ClientID").value =
document.getElementById ("txtAutoCompleteforCompany.ClientID").value;
}
</script>

On the ucCompany.ascx.cs file, we are creating two methods:

• "GetCompanyMasterId" to fetch the Company ID
• "GetCompanyName" to get the name of the company

public int GetCompanyMasterId()
{
try
{
if (hdnCompanyMasterId.Value.Trim() != String.Empty &&
hdnCompanyMasterId.Value.Trim() != "0")
{
if (hdnCompanyName.Value.Trim() ==
txtAutoCompleteforCompany.Text.Trim())
{
return Convert.ToInt32(hdnCompanyMasterId.Value);
}
else
{
return 0;
}
}
else
{
return 0;
}
}
catch
{
throw;
}
finally
{

}
}
public string GetCompanyName()
{
try
{
if (txtAutoCompleteforCompany.Text.Trim() != String.Empty)
{
return txtAutoCompleteforCompany.Text.Trim();
}
else
{
return string.Empty;
}
}
catch
{
throw;
}
finally
{
}
}

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.

protected void Page_Load(object sender, EventArgs e)
{
RegisterClientScript();
}
public void RegisterClientScript()
{
StringBuilder cstext2 = new StringBuilder();
cstext2.Append("<script type=\"text/javascript\">
function setCompanyMasterID(source, eventargs) {");
cstext2.Append("document.getElementById ('" + ClientID +
"_hdnCompanyMasterId').value = eventargs.get_value();");
cstext2.Append("document.getElementById ('" + ClientID +
"_hdnCompanyName').value = document.getElementById
('" + ClientID + "_txtAutoCompleteforCompany').value; }");
cstext2.Append(" </script>");
ScriptManager.RegisterClientScriptBlock(this, GetType(),
"OnClientItemSelected", cstext2.ToString(),false);
}

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.