AutoCompleteExtender Component

The AutoCompleteExtender provides typeahead autocomplete suggestions for a target textbox. As the user types, matching suggestions appear in a dropdown list. This emulates the Ajax Control Toolkit AutoCompleteExtender.

Note: Extender components render no HTML themselves — they attach JavaScript behavior to an existing target element identified by TargetControlID. This page requires InteractiveServer render mode for JS interop.

1. Basic Autocomplete

Type at least 2 characters to see suggestions from a static list of fruits.

<input type="text" id="txtFruits" />
<AutoCompleteExtender TargetControlID="txtFruits"
                      MinimumPrefixLength="2"
                      CompletionSetCount="5"
                      CompletionInterval="500" />

2. Styled Dropdown

Use CompletionListCssClass, CompletionListItemCssClass, and CompletionListHighlightedItemCssClass to style the suggestion dropdown.

<AutoCompleteExtender TargetControlID="txtStyledAc"
                      MinimumPrefixLength="1"
                      CompletionListCssClass="ac-dropdown"
                      CompletionListItemCssClass="ac-item"
                      CompletionListHighlightedItemCssClass="ac-item-highlight" />

3. Minimum Prefix Length

Compare different MinimumPrefixLength values. A lower value triggers suggestions sooner.

<AutoCompleteExtender TargetControlID="txtPrefix1" MinimumPrefixLength="1" />
<AutoCompleteExtender TargetControlID="txtPrefix3" MinimumPrefixLength="3" />
<AutoCompleteExtender TargetControlID="txtPrefix5" MinimumPrefixLength="5" />

4. First Row Selected

When FirstRowSelected="true", the first suggestion is automatically highlighted so the user can press Enter to select it immediately.

<AutoCompleteExtender TargetControlID="txtFirstRow"
                      MinimumPrefixLength="2"
                      FirstRowSelected="true" />

Migration Guide: Ajax Control Toolkit to Blazor

Ajax Control Toolkit (Before)

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:TextBox ID="txtSearch" runat="server" />
<ajaxToolkit:AutoCompleteExtender ID="AutoComplete1" runat="server"
    TargetControlID="txtSearch"
    ServicePath="AutoComplete.asmx"
    ServiceMethod="GetCompletionList"
    MinimumPrefixLength="2"
    CompletionSetCount="10"
    FirstRowSelected="true" />

Blazor with BWFC (After)

<input type="text" id="txtSearch" />
<AutoCompleteExtender TargetControlID="txtSearch"
                      MinimumPrefixLength="2"
                      CompletionSetCount="10"
                      FirstRowSelected="true" />

Migration Steps

  1. Remove asp:ScriptManager
  2. Replace <asp:TextBox> with <input type="text">
  3. Replace <ajaxToolkit:AutoCompleteExtender> with <AutoCompleteExtender>
  4. Keep property names: MinimumPrefixLength, CompletionSetCount, FirstRowSelected
  5. Replace web service calls with Blazor event callbacks or server-side data
  6. Ensure the page uses @rendermode InteractiveServer