1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!doctype html> <html> <head> <title>CodeMirror: Autocomplete Demo</title> <link rel="stylesheet" href="../lib/codemirror.css"> <script src="../lib/codemirror.js"></script> <script src="../lib/util/simple-hint.js"></script> <link rel="stylesheet" href="../lib/util/simple-hint.css"> <script src="../lib/util/javascript-hint.js"></script> <script src="../mode/javascript/javascript.js"></script> <link rel="stylesheet" href="../doc/docs.css"> <style type="text/css">.CodeMirror {border: 1px solid #eee;}</style> </head> <body> <h1>CodeMirror: Autocomplete demo</h1> <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. See the code (<a href="../lib/util/simple-hint.js">here</a> and <a href="../lib/util/javascript-hint.js">here</a>) to figure out how it works.</p> <script> var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, extraKeys: {"Ctrl-Space": function(cm) {CodeMirror.simpleHint(cm, CodeMirror.javascriptHint);}} }); </script> </body> </html> |