title: How to enable code hinting using codemirror?
body: <p>I am using codemirror to allow the user to type anycode like css/html/js.</p>
  
  <p>I need to enable if the user type something like in css mode</p>
  
  <pre><code>div {
   padding-
  }
  </code></pre>
  
  <p>It should hint the user to chose the available options from the list like</p>
  
  <pre><code>div {
  padding-top
  padding-left
  padding-right
  padding-bottom
  }
  </code></pre>
  
  <p>Something like sublime editor using codemirror. Please see the attached image for the demo of sublime auto hinting</p>
  
  <p><a href="https://i.stack.imgur.com/S6lvJ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/S6lvJ.png" alt="enter image description here"></a></p>
  
  <p>Here is my code: </p>
  
  <pre><code> &lt;script src="codemirror-5.4/mode/javascript/javascript.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/mode/css/css.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/mode/htmlmixed/htmlmixed.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/addon/display/fullscreen.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/keymap/sublime.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/addon/hint/show-hint.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/addon/hint/css-hint.js"&gt;&lt;/script&gt;
    &lt;script src="codemirror-5.4/addon/hint/javascript.js"&gt;&lt;/script&gt;
  
  &lt;h3&gt;Editor&lt;/h3&gt;
    &lt;div class="control-group"&gt;
      &lt;label class="control-label" for="textarea2"&gt;HTML&lt;/label&gt;
      &lt;div class="controls"&gt;
          &lt;textarea class="code" name="code" id="codert" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px"&gt;
         &lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="textarea3"&gt;CSS&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;textarea id="code" class="code" name="codeCSS"  cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px"&gt;
          &lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="control-group"&gt;
          &lt;label class="control-label" for="textarea3"&gt;javascript&lt;/label&gt;
          &lt;div class="controls"&gt;
              &lt;textarea id="codeJS" class="code" name="codeJS"  cols="40" rows="5" placeholder="Enter code here ..." style="width: 0px; height: 0px"&gt;
             &lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript code for codemirror</strong></p>
  
  <pre><code>&lt;script&gt;
  
     function loadCSS() {
      var $head = $("#preview").contents().find("head");                
      $head.html("&lt;style&gt;" + editor.getValue() + "&lt;/style&gt;");
  }; 
  
  function loadJS() {
      var scriptTag = "&lt;script&gt;"+editorJS.getValue()+"&lt;";
      scriptTag +=  "/script&gt;";
  
      var previewFrame2 = document.getElementById('preview');
      var preview2 =  previewFrame2.contentDocument ||  previewFrame2.contentWindow.document;
      preview2.open();
      preview2.write(editor2.getValue()+scriptTag);
      preview2.close();
  
      loadCSS();
  };
  
  var delay;
  // Initialize CodeMirror editor with a nice html5 canvas demo.
  
  // css editor
  var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true,
      mode: "text/x-scss",
      keyMap: "sublime",
      theme: 'monokai',
      autoCloseTags: true,
      lineWrapping: true,
      extraKeys: {"Ctrl-Space": "autocomplete"}
  });
  editor.on("change", function() {
      clearTimeout(delay);
  
      delay = setTimeout(updatePreview, 0);
  });
  
  function updatePreview() {
      loadCSS();
  }
  setTimeout(updatePreview, 0);
  
  
  var delay2;
  // Initialize CodeMirror editor with a nice html5 canvas demo.
  var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true,
      mode: "text/html",
      keyMap: "sublime",
      theme: 'monokai',
      autoCloseTags: true,
      lineWrapping: true,
      extraKeys: {"Ctrl-Space": "autocomplete"}
  });
  editor2.on("change", function() {
      clearTimeout(delay2);
  
      delay2 = setTimeout(updatePreview2, 0);
  });
  
  function updatePreview2() {
      var scriptTag = "&lt;script&gt;"+editorJS.getValue()+"&lt;";
      scriptTag +=  "/script&gt;";
  
      var previewFrame2 = document.getElementById('preview');
      var preview2 =  previewFrame2.contentDocument ||  previewFrame2.contentWindow.document;
      preview2.open();
      preview2.write(editor2.getValue()+scriptTag);
      preview2.close();
  
      loadCSS();
  }
  setTimeout(updatePreview2, 0);
  
  
  var delayJS;
  // Initialize CodeMirror editor with a nice html5 canvas demo.
  var editorJS = CodeMirror.fromTextArea(document.getElementById('codeJS'), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true,
      mode: 'javascript',
      keyMap: "sublime",
      theme: 'monokai',
      autoCloseTags: true,
      lineWrapping: true,
      extraKeys: {"Ctrl-Space": "autocomplete"}
  });
  editorJS.on("change", function() {
      clearTimeout(delayJS);
  
      delayJS = setTimeout(updatePreviewJS, 0);
  });
  
  function updatePreviewJS() {
      loadJS();
  }
  setTimeout(updatePreviewJS, 0);
  &lt;/script&gt;
  </code></pre>