CodeMirror Code Completion

I finally got an improved version of code completion working. I am glad that there is a working example, which i referred my work on. It was a frustrating process because  there is no explanation on what is actually going on. I spent a great deal of time understanding the whole operation. The solution though, turned  out to be quite simple after all.

In the demo example, you would find a few files:-

show-hint.js – Just include this directly, it is responsible for creating the hint widget.

xml.js – This acts like a dictionary for the character input. By including this, CodeMirror is able to parse the editor contents. For example, ‘<‘ would be identified as the opening tag automatically.  In my case, I would be using the clike.js instead.

xml-hint.js – This is the only important file that lists the hints passed to it.

In the example, xml-hint obtains a list of ‘tags’ and compare them to the user input. To create your own version of ‘xml-hint.js’ is simple.  The code completion feature is divided into 2 logics:-

1. New hint match – This is when user initiates an input to start the hint. The full list of hints will be displayed.
2. Continued hint match – Continued character inputs will filter the hint list.

For continued hint match, lastIndexOf is used to filter the results. It compares the user input with the list of hints.

In the code completion feature, the mode file (clike.js) plays an important role as well. Imagine the following code is entered:-

Class someClass;

someClass.doSomeClassStuffs();

clike.js parses the lines and differentiates it as three different ‘tokens’ (‘someClass’, ‘.’ and ‘doSomeClassStuffs()’) . In the code completion feature, getTokenAt is used instead of getLine because much more information can be obtained from the token. Then, you can use this token information to perform some logic checks.