I\'m working on trying to add a custom autocomplete, that I want to trigger whenever the user is typing (configurable of course). I\'ve found a couple examples of autocomple
I think everyone has their own use cases. I also had to club parts from different answers to make something which is best for my case.
According to me, I want to show suggestions only on alphabets, numbers, and (.) with an exception of ctrl key pressed. because sometimes I copy or paste something, so that should not open suggestions. 46 ascii is for (.) which I've included with numbers.
activeEditor.on("keydown", function (cm, event) {
if (
!(event.ctrlKey) &&
(event.keyCode >= 65 && event.keyCode <= 90) ||
(event.keyCode >= 97 && event.keyCode <= 122) ||
(event.keyCode >= 46 && event.keyCode <= 57)
) {
CodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
}
});
Do remeber to include 3 things -
js and css of show hint -
<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css">
<script src="codemirror/addon/hint/show-hint.js"></script>
script for language you want the hint for - for ex - javascript
<script src="codemirror/addon/hint/javascript-hint.js"></script>
include this line while initializing your code editor. I've used javascript hint.
hint: CodeMirror.hint.javascript
NOTE: This answer does not work on recent versions of CodeMirror.
onKeyEvent: function(e , s){
if (s.type == "keyup")
{
console.log("test");
}
}
To also display the autocomplete widget:
onKeyEvent: function (e, s) {
if (s.type == "keyup") {
CodeMirror.showHint(e);
}
}
Use this function to autocomplete codeMirror without CTRL + Space.
set completeSingle to false in the show-hint.js
editor.on("inputRead", function(instance) {
if (instance.state.completionActive) {
return;
}
var cur = instance.getCursor();
var token = instance.getTokenAt(cur);
if (token.type && token.type != "comment") {
CodeMirror.commands.autocomplete(instance);
}
});
The most IntelliSense-like behavior can be achieved by this:
var ExcludedIntelliSenseTriggerKeys =
{
"8": "backspace",
"9": "tab",
"13": "enter",
"16": "shift",
"17": "ctrl",
"18": "alt",
"19": "pause",
"20": "capslock",
"27": "escape",
"33": "pageup",
"34": "pagedown",
"35": "end",
"36": "home",
"37": "left",
"38": "up",
"39": "right",
"40": "down",
"45": "insert",
"46": "delete",
"91": "left window key",
"92": "right window key",
"93": "select",
"107": "add",
"109": "subtract",
"110": "decimal point",
"111": "divide",
"112": "f1",
"113": "f2",
"114": "f3",
"115": "f4",
"116": "f5",
"117": "f6",
"118": "f7",
"119": "f8",
"120": "f9",
"121": "f10",
"122": "f11",
"123": "f12",
"144": "numlock",
"145": "scrolllock",
"186": "semicolon",
"187": "equalsign",
"188": "comma",
"189": "dash",
"190": "period",
"191": "slash",
"192": "graveaccent",
"220": "backslash",
"222": "quote"
}
EditorInstance.on("keyup", function(editor, event)
{
var __Cursor = editor.getDoc().getCursor();
var __Token = editor.getTokenAt(__Cursor);
if (!editor.state.completionActive &&
!ExcludedIntelliSenseTriggerKeys[(event.keyCode || event.which).toString()] &&
(__Token.type == "tag" || __Token.string == " " || __Token.string == "<" || __Token.string == "/"))
{
CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
}
});
editor.on("inputRead",function(cm,changeObj){
// hinting logic
})
As far I've seen, "inputRead" is the best event to show "auto completions" in "codemirror". The only drawback is that you can't show hints on backspace or delete.