openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

complete.html (4289B)

      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="http://codemirror.net"><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/codemirror">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 functions 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", "advive", "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>