TextBox AutoCompleteStringCollection Suggest

Question

I have created a form in C# with a CustomSource for a textbox:

public partial class FormLookup : Form
{

    AutoCompleteStringCollection source = new AutoComple         


        

Answer 1

You need to create your custom control for this requirement. I have created similar one. posting logic and code - hope it may help you in getting basic Idea.

You need to create two user controls.

1. Custom Control (container for second user control + text box which you show us in question)
2. Tag control (will contain label to show Text of tag and link label 'x' to remove it) Together it will create a visualization of single unit custom control. where you can type (with you drop down suggestion) and once you press ',' , it will create a tag and store it within.

It will look like below,

Here is code for that.

Custom Control will have following cnntrols by default

private System.Windows.Forms.FlowLayoutPanel flayoutCustomControlContainer;
public System.Windows.Forms.TextBox textBox1; //Marking this public so it can be directly accessed by external code.

here flayoutCustomControlContainer is containing textBox1 by default.

textBox1 will have Key Up event, which will be like below.

        private void textBox1_KeyUp(object sender, KeyEventArgs e)
        {
            if (e.KeyCode == Keys.Oemcomma) //we will perform this on every ',' press
            {
                flayoutCustomControlContainer.Controls.Remove(textBox1);

                TagControl tag = new TagControl(); //creating new Tag control
                tag.lblTagName.Text = textBox1.Text.TrimEnd(",".ToCharArray());
                tag.Remvoed += tag_Remvoed; //subscribing "Removed" event of Tag

                tag.Width = tag.lblTagName.Width + 50;
                tag.Height = tag.lblTagName.Height + 5;

                flayoutCustomControlContainer.Controls.Add(tag);

                textBox1.Text = "";

                flayoutCustomControlContainer.Controls.Add(textBox1);

                textBox1.Focus();
            }
        }


void tag_Remvoed(object sender, EventArgs e)
{
    this.flayoutCustomControlContainer.Controls.Remove((Control)sender);
    textBox1.Focus();
}

Constructor of Custom Control, as you shown in question,

    public CustomControl()
    {
        InitializeComponent();

        source.Add("Test");
        source.Add("TestItem");
        source.Add("TestValue");
        this.textBox1.AutoCompleteMode = System.Windows.Forms.AutoCompleteMode.SuggestAppend;
        this.textBox1.AutoCompleteSource = System.Windows.Forms.AutoCompleteSource.CustomSource;
        this.textBox1.AutoCompleteCustomSource = source;
    }

Now, Tag Control.

    private System.Windows.Forms.FlowLayoutPanel flowLayoutPanel1;
    public  System.Windows.Forms.Label lblTagName;
    private System.Windows.Forms.LinkLabel llblRemove;

link label, llblRemove will have link lable click event which will raise an event, which Custom control is listing.

private void llblRemove_LinkClicked(object sender, LinkLabelLinkClickedEventArgs e)
{
     if (Remvoed != null)
         Remvoed(this, EventArgs.Empty);
}

Now, use this Custom Control anywhere you want to use.

I have uploaded working example project on GitHub.

Find a Link

Answer 2

You need create your own component. The structure can be be:

Panel (the main container with white background and border)
 |-> FlowLayoutPanel (the container for already added tags); Dock = Left
 |    |-> TagControl (you custom control for tag label)
 |    |-> ...        (more tags if required)
 |-> TextBox (the one with autocompletion with no borders); Dock = Fill;

You can encapsulate to your own Control/UserControl and use that event from Toolbox in designer.