topical media & game development

talk show tell print

mobile-query-three-www-live-playground-vendor-CodeMirror2-demo-complete.htm / htm



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


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.