How can I make '.' both insert and open the autocomplete list?

Adding a keybinding to make ‘.’ open the autocomplete list is easy enough, but then the ‘.’ doesn’t actually get inserted into the document. Is there a way to specify a keybinding which executes some command and also inserts those keys into the document?

If your autocomplete function returns results after a dot and you have activateOnTyping enabled, this should just work.

Hmmm, that’s not quite the behavior I’m describing, since that would mean it also always opens on any other keypress as well. I think I’ve described poorly what I’m trying to achieve. The more root issue is that ‘.’ is interpreted as the end of the word, so the suggestion list closes when a period is typed. Instead, the suggestion list should stay open through the ‘.’ character. I’ve been looking through the autocomplete documentation, but I can’t figure out where word separators are configured.

What does your autocompleter work like? And when exactly would you like it to run? There’s no concept of a ‘word’ in the interface—the completer is called every time a character is typed, or the current completions are preserved if the added text matches the result’s span property.

My autocomplete is currently running on every single keystroke, since I’m not currently providing the span field in the results. Since engine gets results from a server, I’d like to avoid sending a request on every keystroke, so I want to start supplying the span property.

My first attempt was to set it to the regexp current_substring + ".*" where current_substring is specified by the autocomplete engine. I’m imagining this will cause the engine to never send a request, except on the first character, since after that it will always match the regexp. Indeed, this is pretty much the behavior I see, except that thing like ‘.’ and ‘space’ make autocompletion quit until re-activated.

I just checked again, and I that the behavior without span is to not quit, even when ‘space’ is pressed, which is also not what I want. Also, this all probably isn’t that big of a deal, so if there isn’t a way to do this, that should probably be fine.

span indicates the shape of token that the current set of completions applies to. So if you make that match an identifier, and return all identifiers that match in the current context, the completer will keep filtering that list as long as the user is typing more letters. When they type a ‘.’, that doesn’t match the span anymore, so your completion source is queried again and can figure out what set of properties to complete for that ‘.’, again with an identifier span so that editing the properties doesn’t cause further queries. I.e. the general idea is not to make the span match the ‘.’, because in almost all situations (unless you include sub-completions containing periods right away), you’ll want to re-query when it is typed.

@marijn I’d also like to know how this works, but I am having trouble visualizing what you are describing, I’d appreciate a code example.

@marijn I am also trying to implement the same behavior and want to understand how this can be possible with the way that autocompletion works in CodeMirror.

The expected behavior that I would like is for all the functions of a parent method such as assert(), log(), error(), etc., to appear in the dropdown when a function is typed with a ‘.’ as shown in the image attached like ‘console.’

Screen Shot 2021-09-30 at 12.07.07 AM

How can this be implemented as currently with CodeMirror after typing the ‘.’ the autocomplete list disappears?

What do you mean by “currently”? What kind of completion source are you currently using?

Thank you for the quick response! I am using the completeFromList and I have activateOnTyping enabled as well.

Only after I type a character after the ‘.’ such as ‘console.l’ does the function appear as shown below.
Screen Shot 2021-09-30 at 12.38.10 AM

I would like to be able to display all the methods after a ‘.’ is typed such as with the string ‘console.’ and get all of its methods to populate in the dropdown and continue to narrow the options as one keeps typing.

I am trying to see that is possible with CodeMirror as I do not see this within the documentation autocompletion

completeFromList doesn’t do any contextual analysis, so you’ll have to write a custom source function if you want something more clever.

How do I find the previous token with CodeMirror API? For instance, with “console.log()” how can I find the token “console” when “console.” is typed? Would I be able to get the token “console” using tokenBefore(types) function?

Have you considered giving that a try? That might go more quickly than asking here. (And yes, tokenBefore is what you need here.)