Search code examples
javascripthtmlcsscodemirror

Codemirror autocomplete doesn't work for javascript


I am trying to make a code editor in JavaScript with Codemirror. I want the autocomplete feature, but it doesn't work. Can someone please tell me what I am doing wrong here.

Here is the code :

var editor = CodeMirror.fromTextArea(myTextarea, {
  lineNumbers: true,
  extraKeys: {
    "Tab": "autocomplete"
  },
  hint: CodeMirror.hint.javascript
});
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://codemirror.net/addon/hint/show-hint.js"></script>
  <script src="https://codemirror.net/addon/hint/anyword-hint.js"></script>
  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  <link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
  <title>Code</title>
</head>

<body>
  <textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>

  </script>


Solution

  • After a ton of research, like checking their site example and stuff, I finally found a working solution, here is the code:

     var editor = CodeMirror.fromTextArea(myTextarea, {
        lineNumbers: true,
        extraKeys: {"Ctrl-Space": "autocomplete"},
        mode: {name: "javascript", globalVars: true}
      });
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
      <link rel="stylesheet" href="https://codemirror.net/addon/hint/show-hint.css">
      <script src="https://codemirror.net/lib/codemirror.js"></script>
      <script src="https://codemirror.net/addon/hint/show-hint.js"></script>
      <script src="https://codemirror.net/addon/hint/javascript-hint.js"></script>
      <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
      <script src="https://codemirror.net/mode/markdown/markdown.js"></script>
      <title>Code</title>
    </head>
    
    <body>
      <textarea name="myTextarea" id="myTextarea" cols="30" rows="10"></textarea>
    </body>
    
    </html>