123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126 |
- <!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>
|