complete.html 4.2 KB

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