Search code examples
javascriptjquerycodemirror

Codemirror how to make custom autocomplete dropdown

Is it possible to use custom autocomplete dropdown in codemirror? What I want to achieve, is to show some not selectable Items. For Example when I click "ctrl-space" I get suggestion list in dropdown, but few on the top are clickable, and some other are just not clickable type suggestions.

Maybe someone knows how is possible to achieve this in codeMirror?

Solution

  • Try at this demo to type "ty" and press ctrl+space and you should see a autocomplete dropdown. https://codemirror.net/demo/complete.html

    When you look close at this file, you should be able to do something similar, which is for sure the best way. https://codemirror.net/addon/hint/show-hint.js

    What comes first in my mind is something like that:

    1. Codemirror.on('change' ... // (origin == "+input" user write something
    2. doc.getCursor
    3. doc.getLineHandle( from cursor position) //to get line string
    4. read line string und build your custom autocomplete dropdown
    5. draw dropdown to cursor cursor position

    You should find all functions at codemirror .net > programming api