Register Assembly in Page Directive :
<%@ Register
Assembly="AjaxControlToolkit"
Namespace="AjaxControlToolkit"
TagPrefix="cc1"
%>
IN HTML 00Test.aspx:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="txt" runat="server”></asp:TextBox>
<cc1:AutoCompleteExtender ID="AC" runat="server"
EnableViewState="False"
FirstRowSelected="True"
ServicePath="00Test.aspx"
ServiceMethod="ListSearch"
TargetControlID="txt"
DelimiterCharacters=":,;"
CompletionListCssClass="ac_completionListElement"
CompletionSetCount="10"
CompletionListItemCssClass="ac_listItem" CompletionListHighlightedItemCssClass="ac_highlightedListItem"
MinimumPrefixLength="1"
CompletionInterval="1000"
OnClientItemSelected="MY" >
</cc1:AutoCompleteExtender>
In Code behind 00Test.aspx.vb:
Partial Class _00Test
Inherits
System.Web.UI.Page
<System.Web.Services.WebMethod()> _
<System.Web.Script.Services.ScriptMethod()> _
Public Shared Function
ListSearch(ByVal prefixText As String,
ByVal
count As Integer)
As String()
If count >
0 Then
Dim con As New SqlClient.SqlConnection("Connestion String")
Dim cmd As New SqlClient.SqlCommand("USP_Page",
con)
cmd.CommandType = CommandType.StoredProcedure
cmd.Parameters.AddWithValue("@SearchTxt", prefixText)
Dim DT As New DataTable
Dim DA As New SqlClient.SqlDataAdapter(cmd)
DA.Fill(DT)
Dim lstCode
As New Generic.List(Of String)
For i As Integer = 0 To DT.Rows.Count - 1
lstCode.Add(DT.Rows(i)("AutoSearch").ToString)
Next
Return lstCode.ToArray
End If
End Function
End Class
// call back function onItemSelect
this function will called when any item will selected from AC List
function MY(source, eventArgs) {
alert(eventArgs._text);
}
.css
.ac_completionListElement
{
padding-left:
0px;
background-color:
inherit;
color: #696969;
border: 1px solid buttonshadow;
text-align: left;
list-style-type:
none;
margin-top:0;
}
/* AutoComplete highlighted item */
.ac_highlightedListItem
{
background-color:
#EAF1F7;
color: black;
padding: 4px;
cursor:pointer;
}
/* AutoComplete item */
.ac_listItem
{
background-color:
window;
color: #696969;
padding: 4px;
}