How works code completion in CaScadeS II's source editor?

  1. if the caret is placed inside some text triggering code completion, a code completion popup appears automatically
  2. all text insertion or deletion there changes the pre-selected option according to the text
  3. up and down arrow keys do not move the caret when a code completion popup is shown, but change the selected option in the popup
  4. tab key will not insert a tabulation in the text but choose the option currently selected in the popup, hide the popup and place the selection after the completed code

How is it implemented?

  1. XBL rulez!
  2. a new key listener in the capturing phase on the edited document
  3. that listener calls preventDefault() if it does something special with the event
  4. if needed, the event is retargeted at the choice in the popup
  5. the whole things requires c++ code, not only JS

For the time being, CSS property completion works just fine and I must say it is reaaaaaallllllyyyyy cool to see that happen inside Gecko's editor :-) It's also fast, damn fast. You'll like it :-)