Ajax Control ToolkitAjax Control Toolkit Samples & Demos

Ajax contorl toolkit AutoComplete Demonstration

AutoComplete Demonstration
Type some characters in this textbox. The web service returns random words that start with the text you have typed.

AutoComplete Description

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.


The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.


In the sample above, the textbox is associated with an AutoCompleteExtender that pulls words that start with the contents of the textbox using a web service.


When you have typed more content than the specified minimum word length, a popup will show words or phrases starting with that value. Caching is turned on, so typing the same prefix multiple times results in only one call to the web service.

AutoComplete Properties

The textbox is linked with an AutoCompleteExtender which is initialized with this code. The italic properties are optional:

<ajaxToolkit:AutoCompleteExtender 
    runat="server" 
    ID="autoComplete1" 
    TargetControlID="myTextBox"
    ServiceMethod="GetCompletionList"
    ServicePath="AutoComplete.asmx"
    MinimumPrefixLength="2" 
    CompletionInterval="1000"
    EnableCaching="true"
    CompletionSetCount="20" 
    CompletionListCssClass="autocomplete_completionListElement" 
    CompletionListItemCssClass="autocomplete_listItem" 
    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
    DelimiterCharacters=";, :"
    ShowOnlyCurrentWordInCompletionListItem="true">
        <Animations>
            <OnShow> ... </OnShow>
            <OnHide> ... </OnHide>
        </Animations>
</ajaxToolkit:AutoCompleteExtender>
    
    
  • TargetControlID - The TextBox control where the user types content to be automatically completed
  • ServiceMethod - The web service method to be called. The signature of this method must match the following:
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetCompletionList(string prefixText, int count) { ... }
    Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
  • ServicePath - The path to the web service that the extender will pull the word\sentence completions from. If this is not provided, the service method should be a page method.
  • ContextKey - User/page specific context provided to an optional overload of the web method described by ServiceMethod/ServicePath. If the context key is used, it should have the same signature with an additional parameter named contextKey of type string:
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public string[] GetCompletionList(
        string prefixText, int count, string contextKey) { ... }
    Note that you can replace "GetCompletionList" with a name of your choice, but the return type and parameter name and type must exactly match, including case.
  • UseContextKey - Whether or not the ContextKey property should be used. This will be automatically enabled if the ContextKey property is ever set (on either the client or the server). If the context key is used, it should have the same signature with an additional parameter named contextKey of type string (as described above).
  • MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.
  • CompletionInterval - Time in milliseconds when the timer will kick in to get suggestions using the web service.
  • EnableCaching - Whether client side caching is enabled.
  • CompletionSetCount - Number of suggestions to be retrieved from the web service.
  • CompletionListCssClass - Css Class that will be used to style the completion list flyout.
  • CompletionListItemCssClass - Css Class that will be used to style an item in the AutoComplete list flyout.
  • CompletionListHighlightedItemCssClass - Css Class that will be used to style a highlighted item in the AutoComplete list flyout.
  • DelimiterCharacters - Specifies one or more character(s) used to separate words. The text in the AutoComplete textbox is tokenized using these characters and the webservice completes the last token.
  • FirstRowSelected - Determines if the first option in the AutoComplete list will be selected by default.
  • ShowOnlyCurrentWordInCompletionListItem - If true and DelimiterCharacters are specified, then the AutoComplete list items display suggestions for the current word to be completed and do not display the rest of the tokens.
  • Animations - Generic animations for the AutoComplete extender. See the Using Animations walkthrough and Animation Reference for more details.
    • OnShow - The OnShow animation will be played each time the AutoComplete completion list is displayed. The completion list will be positioned correctly but hidden. The animation can use <HideAction Visible="true" /> to display the completion list along with any other visual effects.
    • OnHide - The OnHide animation will be played each time the AutoComplete completion list is hidden.

Ajax control toolkit AutoComplete example with demo in asp .net

In this asp .net tuotiral you will learn about ajax control toolkit autocomplete,how to use ajax control toolkit autocomplete,asp.net ajax control toolkit autocompleteextender using web services,ajax control toolkit autocomplete code behind,ajaxcontroltoolkit autocomplete dropdownlist,ajax control toolkit autocomplete without webservice,ajax control toolkit autocomplete tutorial,ajax control toolkit autocomplete sample,ajax control toolkit autocomplete properties,ajax control toolkit autocomplete animation,ajax control toolkit autocomplete css,ajax control toolkit autocomplete onclientitemselected,ajax control toolkit autocomplete not working,ajax control toolkit autocomplete multiple,ajax control toolkit autocomplete key value pair,ajax control toolkit autocomplete json,ajax control toolkit autocomplete images,ajax control toolkit autocomplete example,ajax control toolkit autocomplete from database,ajax control toolkit autocomplete page method,ajax control toolkit autocomplete vb.net,ajax control toolkit autocomplete key value,autocomplete in ajax control toolkit,ajax control toolkit autocomplete not firing,ajax control toolkit autocomplete on select,ajax control toolkit autocomplete database,ajax control toolkit autocomplete asp.net,ajax control toolkit autocomplete parameter,ajax control toolkit autocomplete contextkey,ajax control toolkit autocompleteextender,ajax control toolkit autocomplete with database,ajax control toolkit autocomplete style,ajax control toolkit autocomplete textbox