AutoComplete functionality Using Ajax Control Toolkit

This code snippet will help user to implement autocomplete functionality and also help to customize the autocomplete functioanlity. Like pass optional parameters while getting suggestions and disable tab button and execute some event on selection.

Sample.aspx:

<script type="text/javascript">
var KeyID;

function LoadAutoComplete(source, eventArgs) {
SetContextKeyValue();
}
function DoPostBack(source, eventArgs) {
KeyCheck(source);
if (KeyID != 9)
__doPostBack('lnkSubmit', ''); //Replace this with your script.
else
document.getElementById('<%=txtLastName.ClientID %>').value = source._currentPrefix
}
function KeyCheck(e) {

KeyID = (window.event) ? event.keyCode : e.keyCode;
}
function SetContextKeyValue() {
var firstname = document.getElementById('<%=txtFirstName.ClientID %>').value
var location = document.getElementById('<%=drLocation.ClientID %>').value
if (location == "0")
location = ""
IncludeWOPhone="1"
varFilters = firstname + "~" +
$find('acLastName').set_contextKey(varFilters);
}
</script>

<asp:TextBox ID="txtLastName" TabIndex="1" runat="server" MaxLength="50"></asp:TextBox>
<ajaxToolkit:AutoCompleteExtender runat="server" ID="acLastName" TargetControlID="txtLastName" ContextKey="testValue" UseContextKey="true" ServicePath="../AutoComplete.asmx" ServiceMethod="GetLastName" MinimumPrefixLength="3" OnClientItemSelected="DoPostBack" CompletionInterval="50" EnableCaching="false" CompletionSetCount="10" CompletionListCssClass="ac_completionListElement" OnClientPopulating="LoadAutoComplete" CompletionListItemCssClass="ac_listItem" CompletionListHighlightedItemCssClass="ac_highlightedListItem"> </ajaxToolkit:AutoCompleteExtender>

In the above AutocompleteExtender control I have used properties ContextKey & UseContextKey. The purpose of these properties is to pass optional parameters to filter the records that we are going to populate in auto complete list.
If we want to pass optional parameter then we need to set UseContextKey=”True”. By default value of UseContextKey is False. And in ContextKay property we can pass the filter values.
We can also set these values dynamically using OnClientPopulating event of AutocompleteExtender.
In this event I am calling a JavaScript method “LoadAutoComplete” and within this method I am calling “SetContextKeyValue” to set the ContextKey value at run time.
I have also added one more customization in this code is disable item selection on click of Tab button click and execute some code on selection (Click of enter button or mouse click). I have used OnClientItemSelected event of AutocompleteExtender. And call a method to check if the key pressed is Tab key then do nothing otherwise redirect to next form using __doPostBack.

AutoComplete.asmx.vb

Imports System.Web
Imports System.Web.Services
Imports System.Web.Services.Protocols
Imports System.ComponentModel
<System.Web.Script.Services.ScriptService()> _
<WebService(Namespace:="http://tempuri.org/")> _
<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _
<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

Public Class AutoComplete Inherits System.Web.Services.WebService

<WebMethod()> _
Public Function GetLastName(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
Dim _nameList As New Search
// Call your Own Method Here To get the Result in String Array
Return GetNameList(prefixText, count, contextKey)

End Function
End Class