How to create custom ComboBox control like the ComboBoxAutoComplete?

2 mins read

You can create the custom ComboBox control like the ComboBoxAutoComplete by using the ButtonEdit and AutoComplete controls. The following steps show how to achieve this requirement.

Load the ButtonEdit and AutoComplete controls, and provide DataSource support.
Assign the TextBoxExt control in the ButtonEdit as the AutoComplete control’s target control, so that it processes the input based on its items.
Display the AutoComplete popup depending upon the DropDown button selection.

The following code example demonstrates the same.

void ButtonEditExt_TextChanged(object sender, EventArgs e)
{
    if (!this.DesignMode && this.autocomplete.DataSource != null)
    {
        this.autocomplete.ActiveFocusControl = this.TextBox;
        // Shows the autoCompletePopup.
        this.autocomplete.ProcessAutoComplete(this.TextBox.Text, string.Empty, Point.Empty);
    }
}
void buttonEditChildButton1_Click(object sender, EventArgs e)
{
    if (this.autocomplete.DataSource != null && !this.DesignMode)
    {
        this.autocomplete.ActiveFocusControl = this.TextBox;
        // Shows the autoCompletePopup.
        this.autocomplete.ProcessAutoComplete(this.TextBox.Text, string.Empty, Point.Empty);
    }
}
private object m_DataSource = null;
/// <summary>
/// Gets/sets the DataSource for the ButtonEditExt.
/// </summary>
public object DataSource
{
    get { return m_DataSource; }
    set
    {
        if (this.m_DataSource != value)
        {
            this.m_DataSource = value;
            //Changes parent form of the UserControl.
            this.autocomplete.ParentForm = this.ParentForm;
            this.autocomplete.DataSource = value;
            // Sets the AutoComplete Mode.
            this.autocomplete.SetAutoComplete(this.TextBox, AutoCompleteModes.MultiSuggestExtended);
        }
    }
}
private string displayMember = string.Empty;
/// <summary>
/// Gets/Sets the DisplayMember for the ButtonEditExt.
/// </summary>
public String DisplayMember
{
    get { return displayMember; }
    set
    {
        this.displayMember = value;
        if(this.displayMember != string.Empty)
            this.autocomplete.RefreshColumns();
        foreach(AutoCompleteDataColumnInfo column in this.autocomplete.Columns)
        {
            if(column.ColumnName == value)
            {
                column.Visible = true;
            }
            else
            {
                column.Visible = false;
            }
        }
    }
}

Private Sub ButtonEditExt_TextChanged(ByVal sender As Object, ByVal e As EventArgs)
 If (Not Me.DesignMode) AndAlso Me.autocomplete.DataSource IsNot Nothing Then
  Me.autocomplete.ActiveFocusControl = Me.TextBox
  'Shows the autoCompletePopup.
  Me.autocomplete.ProcessAutoComplete(Me.TextBox.Text, String.Empty, Point.Empty)
 End If
End Sub
Private Sub buttonEditChildButton1_Click(ByVal sender As Object, ByVal e As EventArgs)
 If Me.autocomplete.DataSource IsNot Nothing AndAlso (Not Me.DesignMode) Then
  Me.autocomplete.ActiveFocusControl = Me.TextBox
  'Shows the autoCompletePopup.
  Me.autocomplete.ProcessAutoComplete(Me.TextBox.Text, String.Empty, Point.Empty)
 End If
End Sub
Private m_DataSource As Object = Nothing
''' <Summary>.
''' Gets/sets the DataSource for the ButtonEditExt.
''' </Summary>.
Public Property DataSource() As Object
 Get
  Return m_DataSource
 End Get
 Set(ByVal value As Object)
  If Me.m_DataSource IsNot value Then
   Me.m_DataSource = value
   'Changes parent form of the UserControl.
   Me.autocomplete.ParentForm = Me.ParentForm
   Me.autocomplete.DataSource = value
   ' Sets the AutoComplete Mode.
   Me.autocomplete.SetAutoComplete(Me.TextBox, AutoCompleteModes.MultiSuggestExtended)
  End If
 End Set
End Property
Private displayMember_Renamed As String = String.Empty
''' <Summary>.
''' Gets/Sets the DisplayMember for the ButtonEditExt.
''' </Summary>.
Public Property DisplayMember() As String
 Get
  Return displayMember_Renamed
 End Get
 Set(ByVal value As String)
  Me.displayMember_Renamed = value
  If Me.displayMember_Renamed <> String.Empty Then
   Me.autocomplete.RefreshColumns()
  End If
  For Each column As AutoCompleteDataColumnInfo In Me.autocomplete.Columns
   If column.ColumnName = value Then
    column.Visible = True
   Else
    column.Visible = False
   End If
  Next column
 End Set
End Property

Note:

When AutoComplete mode is set as disabled, the AutoComplete process is stopped.

AutoComplete popup shows matching text