|
0
|
1 <!doctype html>
|
|
|
2
|
|
|
3 <title>CodeMirror: Autocomplete Demo</title>
|
|
|
4 <meta charset="utf-8"/>
|
|
|
5 <link rel=stylesheet href="../doc/docs.css">
|
|
|
6
|
|
|
7 <link rel="stylesheet" href="../lib/codemirror.css">
|
|
|
8 <link rel="stylesheet" href="../addon/hint/show-hint.css">
|
|
|
9 <script src="../lib/codemirror.js"></script>
|
|
|
10 <script src="../addon/hint/show-hint.js"></script>
|
|
|
11 <script src="../addon/hint/javascript-hint.js"></script>
|
|
|
12 <script src="../mode/javascript/javascript.js"></script>
|
|
|
13 <script src="../mode/markdown/markdown.js"></script>
|
|
|
14
|
|
|
15 <div id=nav>
|
|
|
16 <a href="https://codemirror.net/5"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
|
|
|
17
|
|
|
18 <ul>
|
|
|
19 <li><a href="../index.html">Home</a>
|
|
|
20 <li><a href="../doc/manual.html">Manual</a>
|
|
|
21 <li><a href="https://github.com/codemirror/codemirror5">Code</a>
|
|
|
22 </ul>
|
|
|
23 <ul>
|
|
|
24 <li><a class=active href="#">Autocomplete</a>
|
|
|
25 </ul>
|
|
|
26 </div>
|
|
|
27
|
|
|
28 <article>
|
|
|
29 <h2>Autocomplete Demo</h2>
|
|
|
30 <form><textarea id="code" name="code">
|
|
|
31 function getCompletions(token, context) {
|
|
|
32 var found = [], start = token.string;
|
|
|
33 function maybeAdd(str) {
|
|
|
34 if (str.indexOf(start) == 0) found.push(str);
|
|
|
35 }
|
|
|
36 function gatherCompletions(obj) {
|
|
|
37 if (typeof obj == "string") forEach(stringProps, maybeAdd);
|
|
|
38 else if (obj instanceof Array) forEach(arrayProps, maybeAdd);
|
|
|
39 else if (obj instanceof Function) forEach(funcProps, maybeAdd);
|
|
|
40 for (var name in obj) maybeAdd(name);
|
|
|
41 }
|
|
|
42
|
|
|
43 if (context) {
|
|
|
44 // If this is a property, see if it belongs to some object we can
|
|
|
45 // find in the current environment.
|
|
|
46 var obj = context.pop(), base;
|
|
|
47 if (obj.className == "js-variable")
|
|
|
48 base = window[obj.string];
|
|
|
49 else if (obj.className == "js-string")
|
|
|
50 base = "";
|
|
|
51 else if (obj.className == "js-atom")
|
|
|
52 base = 1;
|
|
|
53 while (base != null && context.length)
|
|
|
54 base = base[context.pop().string];
|
|
|
55 if (base != null) gatherCompletions(base);
|
|
|
56 }
|
|
|
57 else {
|
|
|
58 // If not, just look in the window object and any local scope
|
|
|
59 // (reading into JS mode internals to get at the local variables)
|
|
|
60 for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
|
|
|
61 gatherCompletions(window);
|
|
|
62 forEach(keywords, maybeAdd);
|
|
|
63 }
|
|
|
64 return found;
|
|
|
65 }
|
|
|
66 </textarea></form>
|
|
|
67
|
|
|
68 <p>Press <strong>ctrl-space</strong> to activate autocompletion. Built
|
|
|
69 on top of the <a href="../doc/manual.html#addon_show-hint"><code>show-hint</code></a>
|
|
|
70 and <a href="../doc/manual.html#addon_javascript-hint"><code>javascript-hint</code></a>
|
|
|
71 addons.</p>
|
|
|
72
|
|
|
73 <form><textarea style="display: none" id="synonyms" name="synonyms">
|
|
|
74 Here, the completion use an asynchronous hinting function to provide
|
|
|
75 synonyms for each words. If your browser support `Promises`, the
|
|
|
76 hinting function can also return one.
|
|
|
77 </textarea></form>
|
|
|
78
|
|
|
79 <script>
|
|
|
80 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
|
|
81 lineNumbers: true,
|
|
|
82 extraKeys: {"Ctrl-Space": "autocomplete"},
|
|
|
83 mode: {name: "javascript", globalVars: true}
|
|
|
84 });
|
|
|
85
|
|
|
86 if (typeof Promise !== "undefined") {
|
|
|
87 var comp = [
|
|
|
88 ["here", "hither"],
|
|
|
89 ["asynchronous", "nonsynchronous"],
|
|
|
90 ["completion", "achievement", "conclusion", "culmination", "expirations"],
|
|
|
91 ["hinting", "advise", "broach", "imply"],
|
|
|
92 ["function","action"],
|
|
|
93 ["provide", "add", "bring", "give"],
|
|
|
94 ["synonyms", "equivalents"],
|
|
|
95 ["words", "token"],
|
|
|
96 ["each", "every"],
|
|
|
97 ]
|
|
|
98
|
|
|
99 function synonyms(cm, option) {
|
|
|
100 return new Promise(function(accept) {
|
|
|
101 setTimeout(function() {
|
|
|
102 var cursor = cm.getCursor(), line = cm.getLine(cursor.line)
|
|
|
103 var start = cursor.ch, end = cursor.ch
|
|
|
104 while (start && /\w/.test(line.charAt(start - 1))) --start
|
|
|
105 while (end < line.length && /\w/.test(line.charAt(end))) ++end
|
|
|
106 var word = line.slice(start, end).toLowerCase()
|
|
|
107 for (var i = 0; i < comp.length; i++) if (comp[i].indexOf(word) != -1)
|
|
|
108 return accept({list: comp[i],
|
|
|
109 from: CodeMirror.Pos(cursor.line, start),
|
|
|
110 to: CodeMirror.Pos(cursor.line, end)})
|
|
|
111 return accept(null)
|
|
|
112 }, 100)
|
|
|
113 })
|
|
|
114 }
|
|
|
115
|
|
|
116 var editor2 = CodeMirror.fromTextArea(document.getElementById("synonyms"), {
|
|
|
117 extraKeys: {"Ctrl-Space": "autocomplete"},
|
|
|
118 lineNumbers: true,
|
|
|
119 lineWrapping: true,
|
|
|
120 mode: "text/x-markdown",
|
|
|
121 hintOptions: {hint: synonyms}
|
|
|
122 })
|
|
|
123 }
|
|
|
124 </script>
|
|
|
125
|
|
|
126 </article>
|
