The auto-complete feature is a client-side function that is supported by the asp.net ComboBox Control. With auto-complete feature, the combobox will automatically complete and display the first matching item after end-users types some text string in the input area. And the displaying text that is not entered by users will be highlighted. Besides, if you want to display several items in the input area of the web combobox, you can use the AutoCompleteSeparator property of the ComboBox Control which enables users to show several items in the input area with self-defined separator.

And from this online tutorial, we will help you add the auto-complete function into combobox using ASP.NET AJAX with sample programming examples.

Before offering you the detailed sample codes for auto-completing the text in asp.net combobox, we need first illustrate one property called MarkFirstMatch. After setting this property to true, the combobox will automatically complete the text by displaying the first matching item. Thus, you have to set this property to true if you want to use the auto-complete feature in ASP.NET AJAX.

As is said above, set the MarkFirstMatch to true first. And in this section, we will use another property that this asp.net ComboBox Control has offered which is called AllowCustomText. This AllowCustomText property determines whether the user has the ability to input self-defined or custom text (text that is not contained in the combobox collection of items).

Case 1: Set the AllowCustomText property to false

Setting the AllowCustomText property to false means users are not allowed to enter the text that is beyond the items collection. Following sample code shows you how to auto-complete function in aspx web page by turning off the AllowCustomText function.

<kettic:PerComboBox ID="PerComboBox1" runat="server" 
Width="590" Height="140"
EmptyMessage="Type an E-mail"
MarkFirstMatch="true" AllowCustomText="false">
</kettic:PerComboBox>

And the image below is used to represent the result of above ASP.NET combobox auto-completing application.

Case 2: Set the AllowCustomText property to true

On the contrast, the user is enabled to enter custom text in the combobox input area if developers set the AllowCustomText property to true.

In following example, we enter text "Type an E-mail" in the combobox input area programmatically, which is not contained in the default items collection.

<kettic:PerComboBox ID="PerComboBox1" runat="server" 
Width="590" Height="140"
EmptyMessage="Type an E-mail"
MarkFirstMatch="true" AllowCustomText="true">
</kettic:PerComboBox>

Similarly, the image below is used to represent the result of above ASP.NET combobox auto-completing application.

With the AutoCompleteSeparator property, users are allowed to input several items in the combobox input area and the items will be separated with defined separator.

Following sample code will guide you how to auto-complete the combobox with a separator.

<kettic:PerComboBox ID="PerComboBox1" runat="server" 
Width="590" Height="140"
EmptyMessage="Type an E-mail"
MarkFirstMatch="true" AutoCompleteSeparator=",">
</kettic:PerComboBox>

Following image shows the result of applying the combobox AutoCompleteSeparator property.