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

1

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?

1 Like
2

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

3

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

4 
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

                    el.appendChild(icon)
                    el.appendChild(text)
                }
        }],
        from: CodeMirror.Pos(cursor.line, token.start),
        to: CodeMirror.Pos(cursor.line, cursor.ch)
    }
})
1 Like
5

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