Creating Auto Completion/Code Completion in C#

• Download source - 171.1 KB

Introduction

In this article we will create an auto completion/code completion popup window in C#. Intelligent Code Completion is a Context-Aware Code Completion feature in some programming environments that speeds up the process of coding applications by reducing typos and other common mistakes. Attempts to do this are usually done through Auto Completion Popups when Typing, Querying parameters of functions, Query hints related to syntax errors, etc. Intelligent Code Completion and Related Tools serve as documentation and disambiguation for variable names, functions and methods using reflection. Intelligent Code Completion appears in many program environments, an example implementation being Visual Studio's Intellisense.
So How hard it is to build a Code Completion in C#.
I searched on Internet,i found nothing any code instead of developed Editors.
I knew that it is the list that can be shown while typing the code but How to display that list onto the RichTextBox.
Before working on this code i thought it is so much difficult to develope this,it needs so much professionalism,but i was wrong,it depends on your idea.
It is so much easy,how ?
Just create a Listbox Object and Add it to RichTextBox and get Selected Item from List Box and Insert it to the RichTextBox and then Remove that List Box.
You just need to Add or Remove items from List Box.
You can customize your Code Completion Window(listbox) on your own(as shown in above image 3).
We will also complete the Brackets Automatically further(see ProcessAutoCompleteBrackets() function)
In this article we will create simple Code Completion in C#.Download the Code to see the Code Completion using XML.
It is nothing but the Adding or Removing Listbox.
See next Algorithm for better understanding.
For understanding,read all comments carefully in the Code(ccrichtextbox).

Algorithm

1]  :  Create the ListBox object.(I am using CodeCompleteBox object name) 
2]  :  Read X-Y coordinates from RichTextBox 
3]  :  Declare the Boolean variable to identify whether the CodeCompleteBox is added or not.(I am using isCodeCompleteBoxAdded variable) & String variable to identify the complete string(i am using EnteredKey variable)
4]  :  Declare array list of keywords.(I am using keywordslist) 
5]  :  Add following events to RichTextBox 
   Key Press : 
   1 : Identify pressed key is alphabet or not. 
   2 : Remove all items from CodeCompleteBox. 
   3 : Read each item from keywordslist. 
   4 : If each item from keywordslist is starts with pressed key character then add that item into the CodeCompleteBox. 
   5 : Read each item from keywordslist. 
   6 : If each item from keywordslist is starts with pressed key then set that item to selected. 
   7 : Set Default cursor to CodeCompleteBox. 
   8 : Set Size to CodeCompleteBox. 
   9 : Set Location to CodeCompleteBox by reading (x,y) coordinates from Step-2. 
   10 : Add CodeCompleteBox to RichTextBox. 
   11 : Set isCodeCompleteBoxAdded to true. 
Text Changed : 
    If RichTextBox Text is null then Remove CodeCompleteBox from RichTextBox.Before removing first check if isCodeCompleteBoxAdded is true. 
Key Down : 
   1 : Check if Space,Enter,Escape & Back key is down then go to next; 
   2 : If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from RichTextBox. 
Mouse Click : 
    If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from RichTextBox. 
VScroll : 
    If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from RichTextBox. 
6]  :  Add following events to CodeCompleteBox 
  Key Down : 
    1 : Check if isCodeCompleteBoxAdded is true then go to next. 
    2 : If Enter or Space key is down then go to next. 
    3 : Read Selected item from CodeCompleteBox and insert that item in RichTextBox at SelectionStart position. 
    4 : Remove CodeCompleteBox from RichTextBox. 
  Key Press : 
    It is used to insert a pressed character into RichTextBox and also select item in CodeCompleteBox. 
  Mouse Click : 
     Same as above Key Down event Step-3.

<stron

Tool Tip

Here, to Display a tooltip or to display information about selected item of CodeCompletebBox we will use Label to display information and will add this Label to a Panel and this Panel will be added to RichTextBox at specific Location or Next Location to CodeCompleteBox.

In This Article we will not create a Tooltip but Download the Source it contain the whole code with tooltips. 

All operations are same as CodeCompleteBox only adding Key Up Event to CodeCompleteBox. You can set tooltip to a selected item in CodeCompleteBox,just declare your item and its description in ProcessToolTips() function in CCRichTextBox code.

Using the code

I am creating a class CCRichTextBox with super class RichTextBox. 
First lets see some important functions.

I used a function ProcessCodeCompletionAction(String key) to call whenever the key press event is generated in the program. I am reading the getWidth() & getHeight() function to set Width & Height to CodeCompleteBox but you can set them as default. Concat the pressed character with EnteredKey,perform all steps defined in Key Press in above algorithm. Here we will not see the adding of tooltip to CodeCompleteBox,so if you get errors then remove all components of tooltips.

public void ProcessCodeCompletionAction(String key)
{
    EnteredKey = "";

    // concat the key & EnteredKey postfix
    EnteredKey = EnteredKey + key;

    if (Char.IsLetter(key[0]))
    {
        // Clear the CodeCompleteBox Items
        CodeCompleteBox.Items.Clear();
        //add each item to CodeCompleteBox
        foreach (String item in keywordslist)
        {
            //check item is starts with EnteredKey or not
            if (item.StartsWith(EnteredKey))
            {
                CodeCompleteBox.Items.Add(item);
            }
        }


        //  read each item from CodeCompleteBox to set SelectedItem
        foreach (String item in keywordslist)
        {
            if (item.StartsWith(EnteredKey))
            {
                CodeCompleteBox.SelectedItem = item;

                //  set Default cursor to CodeCompleteBox
                CodeCompleteBox.Cursor = Cursors.Default;

                //  set Size to CodeCompleteBox
                // width=this.getWidth() & height=this.getHeight()+(int)this.Font.Size
                CodeCompleteBox.Size = new System.Drawing.Size(this.getWidth(), this.getHeight() + (int)this.Font.Size);

                //  set Location to CodeCompleteBox by calling getXYPoints() function
                CodeCompleteBox.Location = this.getXYPoints();

                //  adding controls of CodeCompleteBox to CCRichTextBox
                this.Controls.Add(CodeCompleteBox);

                //  set Focus to CodeCompleteBox
                CodeCompleteBox.Focus();

                //  set isCodeCompleteBoxAdded to true
                isCodeCompleteBoxAdded = true;


                // set location to ToolTipControl
                ToolTipControl.Location = new Point(CodeCompleteBox.Location.X + CodeCompleteBox.Width, CodeCompleteBox.Location.Y);

                // call ProcessToolTips() function
                this.ProcessToolTips(CodeCompleteBox.SelectedItem.ToString());

                // add ToolTipControl to CCRichTextBox
                this.Controls.Add(ToolTipControl);

                isToolTipControlAdded = true;

                break;
            }

            else
            {
                isCodeCompleteBoxAdded = false;
            }
        }
    }
}

We will also complete the brackets automatically.
I am using the function ProcessAutoCompleteBrackets(KeyPressEventArgs e).
Whenever the (,{,",',<,[ key is pressed then inserting opposite character at the next position of SelectionStart from RichTextBox.

public void ProcessAutoCompleteBrackets(KeyPressEventArgs e)
{
    String s = e.KeyChar.ToString();
    int sel = this.SelectionStart;
    switch (s)
    {
        case "(": this.Text = this.Text.Insert(sel, "()");
            e.Handled = true;
            this.SelectionStart = sel + 1;
            break;

        case "{":
            String t = "{\n                 \n}";
            this.Text = this.Text.Insert(sel, t);
            e.Handled = true;
            this.SelectionStart = sel + t.Length - 6;
            break;

        case "[": this.Text = this.Text.Insert(sel, "[]");
            e.Handled = true;
            this.SelectionStart = sel + 1;
            break;

        case "<": this.Text = this.Text.Insert(sel, "<>");
            e.Handled = true;
            this.SelectionStart = sel + 1;
            break;

        case "\"": this.Text = this.Text.Insert(sel, "\"\"");
            e.Handled = true;
            this.SelectionStart = sel + 1;
            break;

        case "'": this.Text = this.Text.Insert(sel, "''");
            e.Handled = true;
            this.SelectionStart = sel + 1;
            break;
    }
}

Okay Let's perform all steps according to above algorithm.

1) Create List Box Object

public ListBox CodeCompleteBox = new ListBox();

2) Read X-Y coordinates from RichTextBox.
This function returns ths (x,y) coordinates by adding or reducing the size of font of RichTextBox. 
See following image that shows the x-y position up side down CodeCompleteBox. 

public Point getXYPoints()
{
    //get current caret position point from CCRichTextBox
    Point pt = this.GetPositionFromCharIndex(this.SelectionStart);
    // increase the Y co-ordinate size by 10 & Font size of CCRichTextBox
    pt.Y = pt.Y + (int)this.Font.Size + 10;

    //  check Y co-ordinate value is greater than CCRichTextBox Height - CodeCompleteBox
    //   for add CodeCompleteBox at the Bottom of CCRichTextBox
    if (pt.Y > this.Height - CodeCompleteBox.Height)
    {
        pt.Y = pt.Y - CodeCompleteBox.Height - (int)this.Font.Size - 10;
    }

    return pt;
}

3) Declare the Boolean variable to identify whether the CodeCompleteBox is added or not

public static Boolean isCodeCompleteBoxAdded = false; <span style="color: rgb(17, 17, 17); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px;">        </span>

  String variable to identify the complete string           

public static String EnteredKey = "";

4) Declare array list of keywords.Here you can predefine the list in the program or can read the keywords using XML file.Download the source code,i have used both Array list & <List> of string.Here lets declare the array of list.Here i declared few items in it.

public String[] keywordslist = {
         "bool", 
         "break", 
         "case", 
         "catch", 
         "char", 
         "class", 
         "const", 
         "continue", 
         "default", 
         "do", 
         "double",
         "else",
         "enum",  
         "false", 
         "float", 
         "for", 
         "goto", 
         "if"
};

5) Add Key Press,Text Changed,Key Down,Mouse Click, VScroll Events to CCRichTextBox.

   Key Press Event :   
    Here we will directly call the ProcessCodeCompletionAction() function.
    But here we can perform some more actions like creating classes or datatypes.
    I have declared two extra variables Boolean isClassCreated = false; & Boolean isDataTypeDeclared = false; for identify that the inserted item from CodeCompleteBox is class/datatype or not.For that you need to declare the list of classes & datatypes.e.g : Once you select the item Form CodeCompleteBox then CodeCompleteBox will not apper until you will press =/; because to create object of Form you can define it in two ways :

           Form frm;     or        Form frm=new Form();          
    Download the source code,once you drag & drop the CCRichTextBox to your form,in Properties you can enter the list of keywords/classes/datatypes.

protected override void OnKeyPress(KeyPressEventArgs e)
{
    base.OnKeyPress(e);

    ProcessAutoCompleteBrackets(e);
    String key = e.KeyChar.ToString();
    if (isClassCreated && (key == "=" || key == ";"))
    {

        ProcessCodeCompletionAction(key);

        isClassCreated = false;
    }
    else if (isClassCreated && key != "=")
    { }
    else if (isDataTypeDeclared && (key == ";" || key == "{"||key=="}" || key == "(" || key == ")"))
    {

        ProcessCodeCompletionAction(key);
        isDataTypeDeclared = false;
    }
    else if (isDataTypeDeclared && key != ";")
    { }
    else
    {
        ProcessCodeCompletionAction(key);
    }
}

   Text Changed Event : Remove CodeCompleteBox from CCRichTextBox is it's text is null.

protected override void OnTextChanged(EventArgs e)
{
    base.OnTextChanged(e);
    if (this.Text == "")
    {
        if (isCodeCompleteBoxAdded)
        {
            this.Controls.Remove(CodeCompleteBox);
            EnteredKey = "";
        }
    }
}

   Key Down Event :  Check if Space,Enter,Escape & Back key is down then remove CodeCompleteBox from CCRichTextBox.Here i shown only about Space key add other keys yourself. 

     protected override void OnKeyDown(KeyEventArgs e)
     {
		base.OnKeyDown(e);
		switch(e.KeyCode)
		{
		  case Keys.Space:
                 if (isCodeCompleteBoxAdded)
                  {
                     this.Controls.Remove(CodeCompleteBox);
                     EnteredKey = "";
                  }
                 break
         }
	 }

   Mouse Click Event : If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from CCRichTextBox,same as above code for key down.

   VScroll Event :    Code is same as above for Mouse Click.

Here's a function that inserts selected text from popup window,

private void CodeCompleteBox_InsertSelectedText(int length)
{
    int sel = this.SelectionStart;
    String text = CodeCompleteBox.SelectedItem.ToString();
    text = text.Remove(0, length);
    this.Text = this.Text.Insert(sel, text + " ");
    this.SelectionStart = sel + (text + " ").Length;
    this.Controls.Remove(CodeCompleteBox);

    this.ProcessDeclaredClasses(CodeCompleteBox.SelectedItem.ToString());
    this.ProcessDeclaredDataTypes(CodeCompleteBox.SelectedItem.ToString());

    if (isToolTipControlAdded)
    {
        this.Controls.Remove(ToolTipControl);
    }
}

6) Add Key Down,Key Press & Mouse Click Events to CodeCompleteBox.

public CCRichTextBox()
{
    CodeCompleteBox.KeyDown += new KeyEventHandler(CodeCompleteBox_KeyDown);
    CodeCompleteBox.KeyUp += new KeyEventHandler(CodeCompleteBox_KeyUp);
    CodeCompleteBox.KeyPress += new KeyPressEventHandler(CodeCompleteBox_KeyPress);
    CodeCompleteBox.MouseClick += new MouseEventHandler(CodeCompleteBox_MouseClick);
}

        Key Down : First identify that the down key is Enter/Space or not then identify that the CodeCompleteBox is added to CCRichTextBox or not then identify that the selected item from CodeCompleteBox starts with EnteredKey or not then read selected item from CodeCompleteBox.Read the length of EnteredKey,as per the length replace the first characters from selected item from CodeCompleteBox.Now insert that selected item into CCRichTextBox at SelectionStart position and then remove CodeCompleteBox from CCRichTextBox.
        If down key is Space then insert a single space next to the item.
        If down key is Left/Right then remove CodeCompleteBox from CCRichTextBox.
        Here's the code for key Enter and Space

private void CodeCompleteBox_KeyDown(object sender, KeyEventArgs e)
{
    switch (e.KeyCode)
    {
        // if Space key is down when CodeCompleteBox is added to the CCRichTextBox
        //  then insert SelectedItem from CodeCompleteBox to this at SelectionStart location
        //  also inserting a single space because space bar key is down

        case Keys.Space:
            if (isCodeCompleteBoxAdded)
            {
                if (CodeCompleteBox.SelectedItem.ToString().StartsWith(EnteredKey))
                {
                    if (EnteredKey != "")
                    {
                        // before inserting a selected item first check EnteredKey length
                        // if it is 1 then remove first character of selected item from CodeCompleteBox
                        // if it is 2 then remove first 2 characters of selected item from CodeCompleteBox
                        // if it is 3 then remove first 3 characters
                        // if it is greater than 3 then replace EnteredKey with null/"" in selected item text
                        // this all arrangement is important because characters keywords added to CodeCompleteBox could be same
                        if (EnteredKey.Length == 1)
                        {
                            this.CodeCompleteBox_InsertSelectedText(1);
                        }
                        else if (EnteredKey.Length == 2)
                        {
                            this.CodeCompleteBox_InsertSelectedText(2);
                        }
                        else if (EnteredKey.Length == 3)
                        {
                            this.CodeCompleteBox_InsertSelectedText(3);
                        }
                        else
                        {
                            this.CodeCompleteBox_InsertSelectedText(EnteredKey.Length);
                        }
                    }
                }
                else
                {
                    int sel = this.SelectionStart;
                    this.Text = this.Text.Insert(sel, " ");
                    this.SelectionStart = sel + " ".Length;
                }
            }
            break;


        // if Enter key is down when CodeCompleteBox is added to the CCRichTextBox
        //  then insert SelectedItem from CodeCompleteBox to this at SelectionStart location
        // same all procedure as used when Space key is down only without inserting a single space here

        case Keys.Enter:
            if (isCodeCompleteBoxAdded)
            {
                if (EnteredKey != "")
                {
                    if (EnteredKey.Length == 1)
                    {
                        this.CodeCompleteBox_InsertSelectedText(1);
                    }
                    else if (EnteredKey.Length == 2)
                    {
                        this.CodeCompleteBox_InsertSelectedText(2);
                    }
                    else if (EnteredKey.Length == 3)
                    {
                        this.CodeCompleteBox_InsertSelectedText(3);
                    }
                    else
                    {
                        this.CodeCompleteBox_InsertSelectedText(EnteredKey.Length);
                    }
                }
            }
            break;

        // if Left key is down then remove CodeCompleteBox from this
        case Keys.Left:
            if (isCodeCompleteBoxAdded)
            {
                this.Controls.Remove(CodeCompleteBox);
                EnteredKey = "";

                if (isToolTipControlAdded)
                {
                    this.Controls.Remove(ToolTipControl);
                }

            }
            break;

        // if Right key is down then remove CodeCompleteBox from this
        case Keys.Right:
            if (isCodeCompleteBoxAdded)
            {
                this.Controls.Remove(CodeCompleteBox);
                EnteredKey = "";

                if (isToolTipControlAdded)
                {
                    this.Controls.Remove(ToolTipControl);
                }

            }
            break;
    }
}

           Key Up Event : This event removes a code complete box and also insert code snippets according to keys.

private void CodeCompleteBox_KeyUp(object sender, KeyEventArgs e)
{
    switch(e.KeyCode)
    {
        case Keys.Up :
        case Keys.Down:
            if (isCodeCompleteBoxAdded)
            {
                ToolTipControl.Visible = true;
                this.ProcessToolTips(CodeCompleteBox.SelectedItem.ToString());
            }
        break;

        case Keys.Tab:
            if (isCodeCompleteBoxAdded)
            {
                this.InsertingCodeSnippetCodes();
                this.Controls.Remove(CodeCompleteBox);
                EnteredKey = "";

                if (isToolTipControlAdded)
                {
                    this.Controls.Remove(ToolTipControl);
                }

            }
            break;
    }
}

           Key Press Event : This event is used for to select the item that starts with EnteredKey after concatination to it,then read all items from CodeCompleteBox and that item which starts with EnteredKey then set it to selected and also identify that the special character is pressed or not if it is pressed then remove CodeCompleteBox from CCRichTextBox.    

private void CodeCompleteBox_KeyPress(object sender, KeyPressEventArgs e)
{
    String str = e.KeyChar.ToString();

    // in this event we must insert pressed key to this because Focus is on CodeCompleteBox

    // first check pressed key is not Space,Enter,Escape & Back
    // Space=32, Enter=13, Escape=27, Back=8
    if (Convert.ToInt32(e.KeyChar) != 13 && Convert.ToInt32(e.KeyChar) != 32 && Convert.ToInt32(e.KeyChar) != 27 && Convert.ToInt32(e.KeyChar) != 8)
    {
        if (isCodeCompleteBoxAdded)
        {
            // insert pressed key to CCRichTextBox at SelectionStart position
            int sel = this.SelectionStart;
            this.Text = this.Text.Insert(sel, str);
            this.SelectionStart = sel + 1;
            e.Handled = true;

            // concat the EnteredKey and pressed key on CodeCompleteBox
            EnteredKey = EnteredKey + str;

            // search item in CodeCompleteBox which starts with EnteredKey and set it to selected
            foreach (String item in CodeCompleteBox.Items)
            {
                if (item.StartsWith(EnteredKey))
                {
                    CodeCompleteBox.SelectedItem = item;
                    break;
                }
            }
        }
    }

    // if pressed key is Back then set focus to CCRichTextBox
    else if (Convert.ToInt32(e.KeyChar) == 8)
    {
        this.Focus();
    }

      // if pressed key is not Back then remove CodeCompleteBox from CCRichTextBox
    else if (Convert.ToInt32(e.KeyChar) != 8)
    {
        if (isCodeCompleteBoxAdded)
        {
            this.Controls.Remove(CodeCompleteBox);
            EnteredKey = "";
        }
    }



    //  check pressed key on CodeCompleteBox is special character or not
    //   if it is a special character then remove CodeCompleteBox from CCRichTextBox
    switch (str)
    {
        case "~":
        case "`":
        case "!":
        case "@":
        case "#":
        case "$":
        case "%":
        case "^":
        case "&":
        case "*":
        case "-":
        case "_":
        case "+":
        case "=":
        case "(":
        case ")":
        case "[":
        case "]":
        case "{":
        case "}":
        case ":":
        case ";":
        case "\"":
        case "'":
        case "|":
        case "\\":
        case "<":
        case ">":
        case ",":
        case ".":
        case "/":
        case "?":
            if (isCodeCompleteBoxAdded)
            {
                this.Controls.Remove(CodeCompleteBox);
                EnteredKey = "";
            }
            break;

    }
}

        Mouse Click Event : This event code is same as Enter key down event in CodeCompleteBox.

That's it all the steps of algorithm is performed.Download the source code to create Code Completion using XML file and also custom code completion popup. In Properties,you can change the Back & Fore color of Code Completion window.

</stron