You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
4.2 KiB
126 lines
4.2 KiB
<!doctype html> |
|
|
|
<title>CodeMirror: Autocomplete Demo</title> |
|
<meta charset="utf-8"/> |
|
<link rel=stylesheet href="../doc/docs.css"> |
|
|
|
<link rel="stylesheet" href="../lib/codemirror.css"> |
|
<link rel="stylesheet" href="../addon/hint/show-hint.css"> |
|
<script src="../lib/codemirror.js"></script> |
|
<script src="../addon/hint/show-hint.js"></script> |
|
<script src="../addon/hint/javascript-hint.js"></script> |
|
<script src="../mode/javascript/javascript.js"></script> |
|
<script src="../mode/markdown/markdown.js"></script> |
|
|
|
<div id=nav> |
|
<a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a> |
|
|
|
<ul> |
|
<li><a href="../index.html">Home</a> |
|
<li><a href="../doc/manual.html">Manual</a> |
|
<li><a href="https://github.com/codemirror/codemirror">Code</a> |
|
</ul> |
|
<ul> |
|
<li><a class=active href="#">Autocomplete</a> |
|
</ul> |
|
</div> |
|
|
|
<article> |
|
<h2>Autocomplete Demo</h2> |
|
<form><textarea id="code" name="code"> |
|
function getCompletions(token, context) { |
|
var found = [], start = token.string; |
|
function maybeAdd(str) { |
|
if (str.indexOf(start) == 0) found.push(str); |
|
} |
|
function gatherCompletions(obj) { |
|
if (typeof obj == "string") forEach(stringProps, maybeAdd); |
|
else if (obj instanceof Array) forEach(arrayProps, maybeAdd); |
|
else if (obj instanceof Function) forEach(funcProps, maybeAdd); |
|
for (var name in obj) maybeAdd(name); |
|
} |
|
|
|
if (context) { |
|
// If this is a property, see if it belongs to some object we can |
|
// find in the current environment. |
|
var obj = context.pop(), base; |
|
if (obj.className == "js-variable") |
|
base = window[obj.string]; |
|
else if (obj.className == "js-string") |
|
base = ""; |
|
else if (obj.className == "js-atom") |
|
base = 1; |
|
while (base != null && context.length) |
|
base = base[context.pop().string]; |
|
if (base != null) gatherCompletions(base); |
|
} |
|
else { |
|
// If not, just look in the window object and any local scope |
|
// (reading into JS mode internals to get at the local variables) |
|
for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name); |
|
gatherCompletions(window); |
|
forEach(keywords, maybeAdd); |
|
} |
|
return found; |
|
} |
|
</textarea></form> |
|
|
|
<p>Press <strong>ctrl-space</strong> to activate autocompletion. Built |
|
on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a> |
|
and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a> |
|
addons.</p> |
|
|
|
<form><textarea style="display: none" id="synonyms" name="synonyms"> |
|
Here, the completion use an asynchronous hinting function to provide |
|
synonyms for each words. If your browser support `Promises`, the |
|
hinting function can also return one. |
|
</textarea></form> |
|
|
|
<script> |
|
var editor = CodeMirror.fromTextArea(document.getElementById("code"), { |
|
lineNumbers: true, |
|
extraKeys: {"Ctrl-Space": "autocomplete"}, |
|
mode: {name: "javascript", globalVars: true} |
|
}); |
|
|
|
if (typeof Promise !== "undefined") { |
|
var comp = [ |
|
["here", "hither"], |
|
["asynchronous", "nonsynchronous"], |
|
["completion", "achievement", "conclusion", "culmination", "expirations"], |
|
["hinting", "advise", "broach", "imply"], |
|
["function","action"], |
|
["provide", "add", "bring", "give"], |
|
["synonyms", "equivalents"], |
|
["words", "token"], |
|
["each", "every"], |
|
] |
|
|
|
function synonyms(cm, option) { |
|
return new Promise(function(accept) { |
|
setTimeout(function() { |
|
var cursor = cm.getCursor(), line = cm.getLine(cursor.line) |
|
var start = cursor.ch, end = cursor.ch |
|
while (start && /\w/.test(line.charAt(start - 1))) --start |
|
while (end < line.length && /\w/.test(line.charAt(end))) ++end |
|
var word = line.slice(start, end).toLowerCase() |
|
for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1) |
|
return accept({list: comp[i], |
|
from: CodeMirror.Pos(cursor.line, start), |
|
to: CodeMirror.Pos(cursor.line, end)}) |
|
return accept(null) |
|
}, 100) |
|
}) |
|
} |
|
|
|
var editor2 = CodeMirror.fromTextArea(document.getElementById("synonyms"), { |
|
extraKeys: {"Ctrl-Space": "autocomplete"}, |
|
lineNumbers: true, |
|
lineWrapping: true, |
|
mode: "text/x-markdown", |
|
hintOptions: {hint: synonyms} |
|
}) |
|
} |
|
</script> |
|
|
|
</article>
|
|
|