I am using codemirror autoplete demo. It shows some javascript keywords such as application cache,defaultStatus and framenet and many more suggestions. I want it to display my keywords as suggestions. But i am not able to find the source from which these javascript keywords are ing. Please help me with this..

I am using codemirror autoplete demo. It shows some javascript keywords such as application cache,defaultStatus and framenet and many more suggestions. I want it to display my keywords as suggestions. But i am not able to find the source from which these javascript keywords are ing. Please help me with this..

• javascript
• codemirror

4 Answers 4

Javascript mode was very hard to understand. so I took python mode and changing python-hint.js was very easy and i got output what i wanted. Thanks Eliran..

Check out javascript-hint.js, which contains some keywords, as can be seen in the source. e.g. the javascript keywords (line 96):

var javascriptKeywords = 
    ("break case catch continue debugger default delete do else false finally for function " +
     "if in instanceof new null return switch throw true try typeof var void while with")
    .split(" ");

That should get you started on writing your own *-hint.js file.

I was actually looking through older CodeMirror autoplete questions before asking a question of my own when I came across this.

The Javascript pletions e from a bination of sources and you can see this in the source as Eliran has pointed out javascript-hint.js.

This is the relevant function at this time:

    function getCompletions(token, context, keywords, options) {
    var found = [], start = token.string, global = options && options.globalScope || window;
    function maybeAdd(str) {
      if (str.lastIndexOf(start, 0) == 0 && !arrayContains(found, str)) 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 && context.length) {
      // 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.type && obj.type.indexOf("variable") === 0) {
        if (options && options.additionalContext)
          base = options.additionalContext[obj.string];
        if (!options || options.useGlobalScope !== false)
          base = base || global[obj.string];
      } else if (obj.type == "string") {
        base = "";
      } else if (obj.type == "atom") {
        base = 1;
      } else if (obj.type == "function") {
        if (global.jQuery != null && (obj.string == '$' || obj.string == 'jQuery') &&
            (typeof global.jQuery == 'function'))
          base = global.jQuery();
        else if (global._ != null && (obj.string == '_') && (typeof global._ == 'function'))
          base = global._();
      }
      while (base != null && context.length)
        base = base[context.pop().string];
      if (base != null) gatherCompletions(base);
    } else {
      // If not, just look in the global object and any local scope
      // (reading into JS mode internals to get at the local and global variables)
      for (var v = token.state.localVars; v; v = v.next) maybeAdd(v.name);
      for (var v = token.state.globalVars; v; v = v.next) maybeAdd(v.name);
      if (!options || options.useGlobalScope !== false)
        gatherCompletions(global);
      forEach(keywords, maybeAdd);
    }
    return found;
  }

Here you can see a few sources. keywords is a parameter provided by the calling function (not shown) and in this case it was the split string Eliran mentioned:

 var javascriptKeywords = ("break case catch continue debugger default delete do else false finally for function " +
              "if in instanceof new null return switch throw true try typeof var void while with").split(" ");

Then there is a branch in the logic here: if (context && context.length) {

In the true case it uses the context object passed by the caller (in this case a chain of properties). It can use an optional additionalContext object or if useGlobalScope was not explicitly disabled in the options it can use the global object as a base to start the lookup (string, atom, and function types have special handling logic). It then uses a while loop to resolve the context chain and call gatherCompletions. Based on the type of the object passed to gatherCompletions it can try to add the other hard coded lists provided by the split strings:

  var stringProps = ("charAt charCodeAt indexOf lastIndexOf substring substr slice trim trimLeft trimRight " +
                     "toUpperCase toLowerCase split concat match replace search").split(" ");
  var arrayProps = ("length concat join splice push pop shift unshift slice reverse sort indexOf " +
                    "lastIndexOf every some filter forEach map reduce reduceRight ").split(" ");
  var funcProps = "prototype apply call bind".split(" ");

Or by iterating the properties of the javascript object itself.

Finally in the else case token.state.localVars, token.state.globalVars, and again if not explicitly disabled the global object is used as the object to the gatherCompletions function. This is where you will also note the keywords as mentioned above. Note that global is either provided in the options.globalScope or it assumes the value of window.

Summary

Just to quickly show all of the sources here:

1. javascriptKeywords
2. funcProps
3. arrayProps
4. stringProps
5. global object
6. options.additionalContext
7. token.state.localVars
8. token.state.globalVars
9. context properties chain

This really works:

<!doctype html>
<html>
  <head>
<title>CodeMirror</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
<link rel=stylesheet href="https://CodeMirror/doc/docs.css">
<script src="https://CodeMirror/addon/hint/anyword-hint.js" id="anyword"></script>
<link rel="stylesheet" href="https://CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="https://CodeMirror/addon/hint/show-hint.css">
<link rel="stylesheet" href="https://CodeMirror/addon/dialog/dialog.css">
<link rel="stylesheet" href="https://CodeMirror/addon/search/matchesonscrollbar.css">
<script src="https://CodeMirror/lib/codemirror.js"></script>
<script src="https://CodeMirror/addon/edit/closetag.js"></script>
<script src="https://CodeMirror/addon/hint/show-hint.js"></script>
<script src="https://CodeMirror/addon/hint/sql-hint.js"></script>
 <script src="https://CodeMirror/addon/mode/loadmode.js"></script>
<script src="https://CodeMirror/mode/meta.js"></script>
<script src="https://CodeMirror/addon/hint/xml-hint.js"></script>
<script src="https://CodeMirror/addon/hint/html-hint.js"></script>
<script src="https://CodeMirror/addon/search/jump-to-line.js"></script>
<script src="https://CodeMirror/addon/hint/javascript-hint.js"></script>
<script src="https://CodeMirror/mode/xml/xml.js"></script>
<script src="https://CodeMirror/mode/javascript/javascript.js"></script>
<script src="https://CodeMirror/mode/css/css.js"></script>
<script src="https://CodeMirror/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://CodeMirror/addon/dialog/dialog.js"></script> 
<script src="https://CodeMirror/addon/search/searchcursor.js"></script>
<script src="https://CodeMirror/addon/search/jump-to-line.js"></script> 
<script src="https://CodeMirror/addon/search/search.js"></script> 
<script src="https://CodeMirror/addon/scroll/annotatescrollbar.js"></script> 
<script src="https://CodeMirror/addon/search/matchesonscrollbar.js"></script>
</head>
<body>
<div id="editor" onclick="autoplete()"></div>
<script>
    function autoplete() {
        
        myCodeMirror.execCommand("autoplete");
    }
</script>
<script>
   var myCodeMirror = CodeMirror(
   document.getElementById('editor'), {
      lineNumbers: true,
   });
</script>
</body>
</html>