CodeMirror Custom AutoComplete

Create Custom AutoComplete for CodeMirror Editor

by Adi Jaya

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/html-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/addon/hint/xml-hint.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/pastel-on-dark.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/bespin.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/theme/abcdef.min.css">
<div class="wrap">

    <h2>CodeMirror Custom AutoComplete and<br>Set. Theme</h2>
    
    <p id="themecontainer">Loading...</p>
    
    <div>
        <textarea name="html" id="code"></textarea>
    </div>
    
    <ul>
        <li>Default AutoComplete = <code>ctrl-Space</code></li>
        <li>Custom AutoComplete = <code>ctrl-Alt</code></li>   
    </ul>

    
</div>

CSS

html {
    font-family: sans-serif;
}

code {
    color: red;
}

JavaScript

var snippets = [
	{
    	"text": "hello",
        "displayText": "text hello"
    },
	{ 
    	"text": "<div class=\"container\">\n\t\n<\/div>", 
        "displayText": '.container'
	}, 
    {
    	"text": "<link href=\"style.css\" rel=\"stylesheet\"\/>",
        "displayText": 'my css libs'
	}, 
    {
    	"text": "<script src=\"demo/main.js\"><\/script> ",
        "displayText": 'my js libs' 
    }
];

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
	mode: "text/html",
	lineNumbers: true,
	styleActiveLine: true,
	theme: "default",
    extraKeys: {
    	"Ctrl-Space": "autocomplete", //default hint
        'Ctrl-Alt': function () {
        	getSnippet();
        }
	}
});


function getSnippet() {
    CodeMirror.showHint(editor, function () {
      var cursor = editor.getCursor();
      var token = editor.getTokenAt(cursor);
      var start = token.start;
      var end = cursor.ch;
      var line = cursor.line;
      var currentWord = token.string;
      
      var list = snippets.filter(function (item) {
        return item.text.indexOf(currentWord) >= 0;
      });
      
      return {
        list: list.length ? list : snippets,
        from: CodeMirror.Pos(line, start),
        to: CodeMirror.Pos(line, end) };

    }, { 
    	completeSingle: false 
	});
}


/*
	** add 10 jan 2021
  */

createHTMLTheme( "themecontainer", "select_theme" );
function createHTMLTheme( elemeID,  id ){
	var theme = [
  	"default",
		"abcdef",
		"ambiance",
		"bespin",
		"pastel-on-dark"
	];
  var htm = "<select id='"+ id +"'>";
  	for(	var i = 0; i < theme.length; i++ ){
  		htm += "<option value='"+ theme[i] +"'>"+ theme[i] +"</option>";
    }
  	htm += "</select>";
    document.getElementById( elemeID ).innerHTML = htm;
}



//change theme
function cmSetTheme( cmEditor, theme ){
	return cmEditor.setOption("theme", theme);
}

//event change
if( document.getElementById( "select_theme" ) ){
    document.getElementById( "select_theme" ).onchange = function(){
   ...