To get autocomplete in textbox just drag a textbox to a form
Add toolkitscriptmanager.Then click on smart tag and select "Add Auto complete page method".
Now in Getcompletion list function add code for getting data from database.
<System.Web.Services.WebMethodAttribute()> <System.Web.Script.Services.ScriptMethodAttribute()>
Public Shared Function GetCompletionList(ByVal prefixText As String, ByVal count As Integer, ByVal contextKey As String) As String()
Dim names As New ArrayList
Dim db As New dataBase
db.dbOpenConnection()
Dim query As String = "Select username from test "
db.cmd.CommandText = query
Dim dr As OdbcDataReader
dr = db.cmd.ExecuteReader
While dr.Read()
names.Add(dr("username").ToString())
End While
db.dbCloseConnection()
Return (
From m As String In names
Where m.StartsWith(prefixText, StringComparison.CurrentCultureIgnoreCase)
Select m).Take(count).ToArray()
End Function
You can add styles to autocomplete
<style>
For list shown
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;
font-weight: normal;
border: solid 1px #006699;
line-height: 20px;
padding: 10px;
background-color: White;
margin-left:10px;
}
.AutoExtenderList
{
border-bottom: dotted 1px #006699;
cursor: pointer;
color: Maroon;
}
.AutoExtenderHighlight
{
color: White;
background-color: #006699;
cursor: pointer;
}
</style>
Add one div above textbox to show list
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<div ID="divwidth"></div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ID="TextBox1_AutoCompleteExtender" runat="server"
CompletionInterval="100" DelimiterCharacters="" Enabled="True"
MinimumPrefixLength="1" ServiceMethod="GetCompletionList" ServicePath=""
TargetControlID="TextBox1" UseContextKey="True"
CompletionListItemCssClass="AutoExtenderList"
CompletionListCssClass="AutoExtender"
CompletionListHighlightedItemCssClass="AutoExtenderHighlight"
CompletionListElementID="divwidth"></asp:AutoCompleteExtender>
No comments :
Post a Comment