How to add icon to list which appare when I do autocomplete?


Hi , I want to add picture to my words which I put it in list for autocomplete for my own languge … like IDE (NetBeans ) when do autocomplete display for methode picture and the name of methode and for variable display different picture and name of variable. … so How I can insert icon shown with the name of my fields in drop down list which appare on autocomplete?


Give your completions their own render method, as described in the docs.


I read the document it not clear for me How to add icon to my completion @marijn

CodeMirror.registerHelper('hint', 'javascript', function(cm, opts) {

    return {
        list: [{
                text: 'myvar',
                displayText: 'myvar',
                render(el, cm, data) {
                    var icon = document.createElement('span')
                    icon.className = 'myicon'

                    var text = document.createElement('span')
                    text.innerText = data.displayText

        from: CodeMirror.Pos(cursor.line, token.start),
        to: CodeMirror.Pos(cursor.line,


I had a similar question few weeks back. See Customizing autocompletion hint items by adding image before it