How I can customise the autoComplete dropdown list

1

Customise the autoComplete dropdown list and Remove prefix icon or change the icon for drop donw list items which classes need to change style and what property have to change

2

To inspect the element with devtools, do setTimeout(() => {debugger}, 1000) and quickly open autocomplete.

3

I am able to access the classes and styles but not able to remove the image and add the custom image icon there

4

Hello, I’d like to write a user search function by nickname (let’s call it “suggest”). On the one hand, this looks like an autocomplete for the language. On the other hand, it has different functionality.

I decided not to use the “override” option and instead used the standard logic.

export function myLang({languageData = []}: MyLangOptions = {}): Extension {
    const mdSupport = markdown({
        base: markdownLanguage,
        addKeymap: true,
        completeHTMLTags: false,
        extensions: [UnderlineExtension, MonospaceExtension, MarkedExtension],
    });

    return [
        mdSupport,
        mdSupport.language.data.of(mdAutocomplete),
        languageData.map((item) => mdSupport.language.data.of(item)),
    ];
}

This solved the problem, but there remains a problem with displaying the loading status for “suggest”. While the data is being loaded, I want to display a banner. I don’t want just words, I want some kind of component with a GIF. The addToOptions.render method allows me to use a view only when the data has been loaded. Do I understand correctly that currently there is no way to show another view until the data has loaded? Maybe it would be worth adding a preview rendering method or a public method to trigger re-rendering?

1 Like
5

@codemirror/autocomplete has no loading animation at all, so indeed, it won’t help you with this. You may be able to build something on top of completionStatus.

1 Like