You are here

Home » API reference » CSS Editor 7

CodeMirror: Autocomplete Demo in CSS Editor 7

Press ctrl-space to activate autocompletion. See the code (here and here) to figure out how it works.

File

lib/codemirror-3.11/demo/complete.html
View source 
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CodeMirror: Autocomplete Demo</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <script src="../addon/hint/show-hint.js"></script>
    <link rel="stylesheet" href="../addon/hint/show-hint.css">
    <script src="../addon/hint/javascript-hint.js"></script>
    <script src="../mode/javascript/javascript.js"></script>
    <link rel="stylesheet" href="../doc/docs.css">
  </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="../addon/hint/show-hint.js">here</a>
and <a href="../addon/hint/javascript-hint.js">here</a>) to figure out
how it works.</p>

    <script>
      CodeMirror.commands.autocomplete = function(cm) {
        CodeMirror.showHint(cm, CodeMirror.javascriptHint);
      }
      var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
        lineNumbers: true,
        extraKeys: {"Ctrl-Space": "autocomplete"}
      });
    </script>
  </body>
</html>