Using hint UI for automatic import selection?


The hint addon lets you set up standard autocompletion systems. However we’re using it (among other things) to provide a UI for selecting what import to include for a given token. The UX is that you press a shortcut when you’re on the token, and it drops down a hint-list where you can select what import to add.

All well and good. But we’d like to add the ability to filter this list down. So we’d like to be able to type and have the entered text filter the list of candidates, but not show up in the editor. So far it doesn’t look like this sort of thing is supported. Am I missing something?


Could you clarify this further? I don’t understand the use-case – if you’re not showing the list, how is filtering it meaningful?


It seems that OP wants some kind of autosuggest functionality? (Like this:


We’re interested in showing the drop-down list (shotHint()) and then allow users to filter down that list by typing.
The list will be filtered down to only elements that contain the typed string.

“autosuggest” shares some aspects with this - it allows filtering down the drop-down list.


What showHint does is call your hint function again every time something is typed. That should have the effect you describe, if your hint function filters based on the text before the cursor. If it’s doing something expensive that you don’t want to repeat every time, I suggest caching that on the level of the hint function.


We use showhint to produce a drop-down list, and position it at some point in the test; for example, suggest a list of imports for a type in Java. So, we cannot filter based on what is typed; we just want the result of the drop-down list, not to replace what is behind the cursor with it.
That’s why we are asking for a way to add a filter to the dropdown list, independently what is the text before the cursor. (we need this because this list may be long)


I still don’t get it. If you’re using showHint, you do have access to the selection and thus you can filter on context. If you want to filter in some other way, you’re also free to do that, without making any change to showHint, simply by doing the filtering in your hint function.


I am trying to implement this type of flow:

  1. User presses some keyboard shortcut
  2. A showHint dropdown appears in the editor
  3. The user types something to narrow down the list of completions in the dropdown (note: the typed text does not show up in the editor, it only filters the dropdown)
  4. The user presses enter and the hint function’s final effect happens

I believe this is representative of the other commenters too.


Ahh, so focus moves to the completion UI, so to say. Well, that not something that currently exists in CodeMirror. You might be able to use the existing hinting functions to populate your list (though most of them do some filtering, which you may not want), but the UI component and the filtering you’d have to do yourself.