Monday, November 26, 2012

Ajax Autocomplete

  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