Akryum / vue-mention

Mention component for Vue.js
https://vue-mention.netlify.app/
MIT License
523 stars 54 forks source link

Trigger on every character input instead of @ sign #48

Open WieFel opened 3 years ago

WieFel commented 3 years ago

Hi,

I'm using vue-mention to implement a textarea for inputting a mathematical expression. When the user inputs an existing variable name, the tooltip should pop up with autocomplete-suggestions just as it happens in every IDE for coding. Currently, I only got it working with typing the @ sign when wanting to select a variable.

Screenshot 2021-06-14 at 10 39 19

But obviously it would be more convenient if the mentionable tooltip would trigger while typing simple characters (i.e. trigger on the first input character, then filter on the following ones), instead of having to use the @ sign. I tried with using the whole alphabet as keys for the Mentionable:

alphabet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ".split('');

and

<Mentionable
      :keys="alphabet"
      :items="listItems"
      offset="5"
      omitKey
      insertSpace
    >
    ...

But that breaks the filtering, and the autocompletion doesn't work properly either.

Any suggestions on how to implement this? It would be nice to have some functionality that supports this use case.