How to make textbox, dropdownlist combination control using ajax combobox in asp.net

Step 1 :

Add the AjaxControlToolkit Reference to your asp.net website and register its assembly on the required page.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Step 2:

Add the ToolkitScriptManager above any ajax tool, using this code,

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

</asp:ToolkitScriptManager>

Step 3:

Now add the following combobox ajax control, combobox is a combination of textbox and dropdown with all dropdown properties and few additional.

<asp:ComboBox ID="ddlRequestTo" runat="server" DropDownStyle="Simple" AutoCompleteMode="SuggestAppend" CssClass="col-md-9">

</asp:ComboBox>

Some Imp Points :

DropDownStyle :

• Simple :- Any text is allowed and the list is always displayed.
• Dropdownlist :- User are not allowed to enter text that does not match an item in the list.
• DropDown :- (default value), any text is allowed

AutoCompleteMode :

• Suggest :- The combobox will show the list, highlight the first matched item.
• Append :- The combobox will append the remainder of the first matched item to the user-typed text and highlight the appended text.
• None :- (default value), Combobox autocomplete behavior is disable.
• SuggestAppend :- Both behavior of append and suggest will be applied.

Now, in case if you need to enhance or override the default css of the combobox, you can do it as follows :

For Textbox container use the following id :

.ajax__combobox_textboxcontainer {

}

For textbox container input box

.ajax__combobox_textboxcontainer input {

}

For Dropdown list items :

.ajax__combobox_itemlist {

}

When changing itemlist css do add the !important tag as below :

.ajax__combobox_itemlist {

top: 0px !important;

width: 80% !important;

left: 185px !important;

}