Post
Ask Question

Creating AutoComplete HTML Tags In C#

   

Introduction

Nowadays,almost in all advanced HTML, PHP, JavaScript,Perl etc. editors support automatically closing HTML tags feature. Visual Studio provides rich built in feature like automatically closing tags with AutoCompletion (Code Completion). In this article, we will create automatically completing HTML tags.

Download the source code to view simple and advanced HTML tags completion.

Procedure:

Step 1 : Create Windows Forms Application in C#.
Step 2 : Drag & Drop RichTextBox onto that Form.
Step 3 : Add KeyPress & KeyDown events to RichTextBox.
 
Coding:
 
First declare the variables: 
  1. public static String EnteredString = "";  
  2. public static Boolean Is_LessThanKeyPressed = false;  
  3. public static Boolean Is_GreaterThanKeyPressed = false;  
  4. public static Boolean Is_AutoCompleteCharacterPressed = false;  
  5. public Boolean Is_SpaceBarKeyPressed = false;  
  6. public Boolean Is_TagClosedKeyPressed = false;   
EnteredString:

String variable to hold typed characters in RichTextBox. 

Is_LessThanKeyPressed:

The value is set to true when "<" key is pressed,because HTML tag starts with "<"(e.g.: <html).

Is_GreaterThanKeyPressed : The value is set to true when ">" key is pressed,when ">" key is pressed,
  • Select the current index from RichTextBox.
  • Insert proper closing tags associated with starting tag at current index position.
Is_AutoCompleteCharacterPressed:

The value is set to true when auto complete character is pressed like( ",',[,( ) for performing AutoCompleteBrackets feature.

Is_SpaceBarKeyPressed:

The value is set to true when Space key is down.This variable is used to complete html tags even if space bar key is pressed.We press the space bar key to add attributes to given html tag,so to complete this tag,we need this variable.

Is_TagClosedKeyPressed:

The value is set to true when html tag is completed by user not automatically or when auto completion feature fails then user must end the tag,when he ends then tag by pressing ">" key then that tag must not be completed again.
 
Declare the array list of html tags:
  1. public String[] tagslist =  
  2.   {  
  3.     "html",  
  4.     "head",  
  5.     "title",  
  6.     "body",  
  7.     "h1",  
  8.     "h2",  
  9.     "h3",  
  10.     "h4",  
  11.     "h5",  
  12.     "h6",  
  13.     "b",  
  14.     "u",  
  15.     "i",  
  16.     "sub",  
  17.     "sup",  
  18.     "center",  
  19.     "strike",  
  20.     "font",  
  21.     "p",  
  22.     "style",  
  23.     "pre",  
  24.     "a",  
  25.     "img",  
  26.     "table",  
  27.     "tr",  
  28.     "th",  
  29.     "td",  
  30.     "form",  
  31.     "input",  
  32.     "div",  
  33. };  
KeyPress event:

Get the pressed character. If it is "<" then set EnteredString="",Is_LessThanKeyPressed value to true and Is_SpaceBarKeyPressed value to false. If pressed character is ">" then first check Is_TagClosedKeyPressed value is false or not,if it is false then set Is_GreaterThanKeyPressed value to true & Is_SpaceBarKeyPressed value to false and insert the closing tag at current SelectionStart position in RichTextBox by matching EnteredString with each element in tagslist. Once tag is inserted then set EnteredString="".

If pressed key is other character then first check if it is letter or digit, if it is then concat that character with EnteredString.

Here's the code, 
  1. private void richTextBox1_KeyPress(object sender, KeyPressEventArgs e)  
  2. {  
  3.     String ch = e.KeyChar.ToString();  
  4.   
  5.   
  6.     this.ProcessAutoCompleteBrackets(ch);  
  7.   
  8.     if (ch == "<")  
  9.     {  
  10.         Is_LessThanKeyPressed = true;  
  11.         Is_SpaceBarKeyPressed = false;  
  12.         EnteredString = "";  
  13.     }  
  14.     else if (ch == ">")  
  15.     {  
  16.         if (!Is_TagClosedKeyPressed)  
  17.         {  
  18.             Is_GreaterThanKeyPressed = true;  
  19.             Is_SpaceBarKeyPressed = false;  
  20.   
  21.             int oldsel = richTextBox1.SelectionStart;  
  22.   
  23.             for (int i = 0; i < tagslist.Length; i++)  
  24.             {  
  25.                 if (EnteredString == tagslist[i])  
  26.                 {  
  27.                     richTextBox1.Text = richTextBox1.Text.Insert(oldsel, "</" + tagslist[i] + ">");  
  28.                     richTextBox1.SelectionStart = richTextBox1.SelectionStart + oldsel;  
  29.                     EnteredString = "";  
  30.                 }  
  31.             }  
  32.   
  33.             Is_LessThanKeyPressed = false;  
  34.         }  
  35.         else  
  36.         {  
  37.             Is_TagClosedKeyPressed = false;  
  38.         }  
  39.     }  
  40.   
  41.     else  
  42.     {  
  43.         if (Is_LessThanKeyPressed)  
  44.         {  
  45.             for (char a = 'a'; a <= 'z'; a++)  
  46.             {  
  47.                 if (a.ToString() == ch)  
  48.                 {  
  49.                     EnteredString += ch;  
  50.                 }  
  51.                 else if (a.ToString().ToUpper() == ch)  
  52.                 {  
  53.                     EnteredString += ch;  
  54.                 }  
  55.             }  
  56.             for (int a = 0; a <= 9; a++)  
  57.             {  
  58.                 if (a.ToString() == ch)  
  59.                 {  
  60.                     EnteredString += ch;  
  61.                 }  
  62.             }  
  63.         }  
  64.     }  
  65.   
  66.   
  67.     // if user itself closes the tag  
  68.     if (Is_LessThanKeyPressed)  
  69.     {  
  70.         if (ch == "/")  
  71.         {  
  72.             Is_TagClosedKeyPressed = true;  
  73.             Is_SpaceBarKeyPressed = true;  
  74.             EnteredString = "";  
  75.         }  
  76.     }  
  77. }  
KeyDown event:

If key is Space then set the value of EnteredString to the same value of exists in tagslist. If key is Up,Down,Left,Right then first check Is_AutoCompleteCharacterPressed is false,if it is then set EnteredString="" & Is_AutoCompleteCharacterPressed = false & Is_SpaceBarKeyPressed=false. If key is Back then get the character from current position.if that character is not equal to ">" then
remove that character from RichTextBox,if that character is "<" then set EnteredString="".  
  1. private void richTextBox1_KeyDown(object sender, KeyEventArgs e)  
  2. {  
  3.     switch (e.KeyCode)  
  4.     {  
  5.         case Keys.Space:  
  6.             Is_SpaceBarKeyPressed = true;  
  7.   
  8.             if (Is_GreaterThanKeyPressed)  
  9.             {  
  10.                 Is_GreaterThanKeyPressed = false;  
  11.             }  
  12.             Is_LessThanKeyPressed = false;  
  13.   
  14.             for (int i = 0; i < tagslist.Length; i++)  
  15.             {  
  16.                 if(EnteredString==tagslist[i])  
  17.                 {  
  18.                     EnteredString = tagslist[i];  
  19.                 }  
  20.             }  
  21.             break;  
  22.   
  23.         case Keys.Up:  
  24.             if (Is_AutoCompleteCharacterPressed == false)  
  25.             {  
  26.                 EnteredString = "";  
  27.                 Is_AutoCompleteCharacterPressed = false;  
  28.             }  
  29.             Is_SpaceBarKeyPressed = false;  
  30.             break;  
  31.   
  32.         case Keys.Down:  
  33.             if (Is_AutoCompleteCharacterPressed == false)  
  34.             {  
  35.                 EnteredString = "";  
  36.                 Is_AutoCompleteCharacterPressed = false;  
  37.             }  
  38.             Is_SpaceBarKeyPressed = false;  
  39.             break;  
  40.   
  41.         case Keys.Left:  
  42.             if (Is_AutoCompleteCharacterPressed == false)  
  43.             {  
  44.                 EnteredString = "";  
  45.                 Is_AutoCompleteCharacterPressed = false;  
  46.             }  
  47.             Is_SpaceBarKeyPressed = false;  
  48.             break;  
  49.   
  50.         case Keys.Right:  
  51.             if (Is_AutoCompleteCharacterPressed == false)  
  52.             {  
  53.                 EnteredString = "";  
  54.                 Is_AutoCompleteCharacterPressed = false;  
  55.             }  
  56.             Is_SpaceBarKeyPressed = false;  
  57.             break;  
  58.   
  59.         case Keys.Enter: EnteredString = "";  
  60.             Is_SpaceBarKeyPressed = false;  
  61.             break;  
  62.   
  63.         case Keys.Back:  
  64.             int sel = richTextBox1.SelectionStart;  
  65.             Point pt = richTextBox1.GetPositionFromCharIndex(sel);  
  66.             char ch = richTextBox1.GetCharFromPosition(pt);  
  67.             if (EnteredString.Length > 0)  
  68.             {  
  69.                 if (ch != '>')  
  70.                 {  
  71.                     EnteredString = EnteredString.Remove(EnteredString.Length - 1);  
  72.                     Is_LessThanKeyPressed = true;  
  73.                 }  
  74.             }  
  75.             if (ch == '<')  
  76.             {  
  77.                 EnteredString = "";  
  78.             }  
  79.             break;  
  80.     }  
  81. }  
With AutoCompletion Feature 
 
   

We will also create AutoComplete HTML tags with AutoCompletion(Code Completion) feature. Dont know how to create AutoCompletion in C#,
Coding is the same as defined in the above article link, only just adding AutoComplete HTML tags feature and modifying contents. Download the source code to view automatic html tags completion with autocompletion feature. With autocompletion feature you can direcly select tags from the popped up list and can complete them by just pressing ">" key on it. I have created ACHTMLTags.cs (AutoCompleteHTMLTags) class in source code.
 
Read more articles on C#:


Similar Articles