Sign In
Create Account
Follow Us on Twitter
Subscribe on Youtube
OK lets get started! Where going to make a HTML auto-completer!(you can can change the language to what ever you want though(I'll explain later)) First drag a richtextbox and listbox to the form. Now the first thing we need to do is declare these three variables:
bool listShow = false;
string keyword = "<";
int count = 0;The first one is to tell if the listbox is showing, the second variable is so we can automatically scroll to the closest word in the auto-complete box, say if I type "<im" it will automatically scroll to the closest thing like "<img>", so we can select it. The third is to tell how long the string is so we can go back and erase it to add the selected auto-complete word(you'll understand once we use it)OK so now go ahead a click the richtextbox and go into it's properties, then click the lighting bolt on the top bar.(this gives you a list of functions you can create for the richtextbox) Find the "KeyPress" function and double click it, and it should create this:
private void richTextBox1_KeyPress(object sender, KeyPressEventArgs e)
{
}OK so now that we have a keypress function lets add this code inside: if (listShow == true) [COLOR=#000080]/*Section 1*/[/COLOR]
{
keyword += e.KeyChar;
count++;
Point point = this.richTextBox1.GetPositionFromCharIndex(richTextBox1.SelectionStart);
point.Y += (int)Math.Ceiling(this.richTextBox1.Font.GetHeight()) + 13; //13 is the .y postion of the richtectbox
point.X += 105; //105 is the .x postion of the richtectbox
listBox1.Location = point;
listBox1.Show();
listBox1.SelectedIndex = 0;
listBox1.SelectedIndex = listBox1.FindString(keyword);
richTextBox1.Focus();
}
if (e.KeyChar == '<') [COLOR=#000080]/*Section 2*/[/COLOR]
{
listShow = true;
Point point = this.richTextBox1.GetPositionFromCharIndex(richTextBox1.SelectionStart);
point.Y += (int)Math.Ceiling(this.richTextBox1.Font.GetHeight()) + 13; //13 is the .y postion of the richtectbox
point.X += 105; //105 is the .x postion of the richtectbox
listBox1.Location = point;
count++;
listBox1.Show();
listBox1.SelectedIndex = 0;
listBox1.SelectedIndex = listBox1.FindString(keyword);
richTextBox1.Focus();
}
OK, I know that looks kinda complicated, but it not that bad. OK first see how I labeled the code //Section 1, //Section 2 ect...? thats so I can refer to it. Section 1: OK so now see what section 1 does is, checks to see if the auto complete box is open then its open keyword += to the key pressed, so we can scroll to the closest word(like a explained above) So if I typed < then p keyword equal "<p" and it would scroll to "<p>". Count++ just adds 1 to count that way we know how many spaces to go back.(once again we'll get to that part) OK now the next four lines show the listbox, decide where the listbox should be at, then move it to the given position, as you can see by the comments 13 is the .y positions of my richtextbox so change it to the Y position of your richtextbox, then do the same for the X value.(so if your richtextbox's Y location is 23, the code should read " point.Y += (int)Math.Ceiling(this.richTextBox1.Font.GetHeight()) + 23;") OK the next two lines, just set the selected index of the listbox to 0 then scrolls to the word closest to the keyword. The last line sets the focus back to the richtextbox so we can type more if we would like.
Section 2: Does exactly the same thing except it sets listshow equal to true.
OK, one last large section of code and a small section and where done, 1/3 the way. :)
OK so now go ahead a click the richtextbox and go into it's properties, then click the lighting bolt on the top bar again,
Now find the "KeyDown" function and double click it, it should create this code:
private void richTextBox1_KeyDown(object sender, KeyEventArgs e)
{
} OK now we need to add this code inside those brasses:
if (e.KeyCode == Keys.Enter) [COLOR=red]/*Section 1*/[/COLOR]
{
count = 0;
keyword = "<";
listShow = false;
listBox1.Hide();
}
if (e.KeyCode == Keys.Space)
{
count = 0;
keyword = "<";
listShow = false;
listBox1.Hide();
}
if (listShow == true) [COLOR=#ff0000]/*Section 2*/[/COLOR]
{
if (e.KeyCode == Keys.Up)
{
listBox1.Focus();
if (listBox1.SelectedIndex != 0)
{
listBox1.SelectedIndex -= 1;
}
else
{
listBox1.SelectedIndex = 0;
}
richTextBox1.Focus();
}
else if (e.KeyCode == Keys.Down)
{
listBox1.Focus();
try
{
listBox1.SelectedIndex += 1;
}
catch
{
}
richTextBox1.Focus();
}
if (e.KeyCode == Keys.Tab) [COLOR=#ff0000]/*Section 3*/[/COLOR]
{
string autoText = listBox1.SelectedItem.ToString();
int beginPlace = richTextBox1.SelectionStart - count;
richTextBox1.Select(beginPlace, count);
richTextBox1.SelectedText = "";
richTextBox1.Text += autoText;
richTextBox1.Focus();
listShow = false;
listBox1.Hide();
int endPlace = autoText.Length + beginPlace;
richTextBox1.SelectionStart = endPlace;
count = 0;
}
} OK, I know that looks long AND complicated, but Ill go over it. OK first I labeled to code with Section 1....again.Section 1: Just says if the user presses the enter or space key set our count back to 0, are keyword equal to "<" and hide the listbox.
Section 2: This says, if the autocomplete box is showing and the user presses the down or up key move the listbox selection down or up one.(so if you pressed down it would move from the current selection to the one below it)
Section 3:First says, if the user presses the tab key get the text of the current selected item in the listbox. Then we need to get the current position in the richtextbox(that flashing letter bar thing :P) then move it back equal to how long are keyword is, so if are key word was "<ht" it would move back three spaces. OK so why do we do this? well because the next 3 lines of code selects the text from the current position to the value a count, then deletes it, and adds the listbox's selected text there instead. OK so be a little more clear if I have the string "<ht" then it will move backward(the letter bar thing) equal to count or 3 because "<ht" is three characters long, then select the text from your current position to the the end of the the string("<ht"), delete it and replace with listbox's selected item text. I Know I know confusing, but hopefully you kinda understand. OK the rest of the code is pretty strait forward: set the focus back the richtextbox hide the listbox, then find the end of the string we just added(the listbox selected item text) and move are letter bar there, then reset count to 0.
OK one last small piece of code and where pretty much done.
OK so now go ahead a click the listbox this time and go into it's properties, then click the lighting bolt on the top bar,
Now find the "Double click function" function and double click it, it should create this code:
private void listBox1_DoubleClick(object sender, EventArgs e)
{
}Now add this last bit of code:
string autoText = listBox1.SelectedItem.ToString();
int beginPlace = richTextBox1.SelectionStart - count;
richTextBox1.Select(beginPlace, count);
richTextBox1.SelectedText = "";
richTextBox1.Text += autoText;
richTextBox1.Focus();
listShow = false;
listBox1.Hide();
int endPlace = autoText.Length + beginPlace;
richTextBox1.SelectionStart = endPlace;
count = 0; Which does exactly what we just did in section 3 of the previous code, except for a double click instead of the tab key being pressed.OK we are %99 done just a few properties to change! First set the richtextbox and listbox's TabStop property to False, then set the listbox's visible property to false, and the last thing to do is edit the collection of the listbox.(that would be the auto-completing words)
Congratulations! you have a fully working auto completing richtextbox! Sorry I know this tutorial may have been kind of confusing but I hope it helped some one. :)
As always +rep, comments, and questions welcome. +rep is very welcome especially since there are almost no tutorials on autocompleting richtextboxes that don't need a custom control or huge classes.
Edited by CommittedC0der, 04 May 2010 - 05:04 AM.
There's nothing named [code=csharp]
Back to top
