文本字段使用 react-select 自动建议用户名

Question

I would like to create a React component using react-select to auto suggest usernames in a text field similar to the one I am typing in now.

The feature would be triggered when a '@' is typed at the beginning of a word or by itself, than the drop down select options will be shown (similar to facebook's and github username suggest for text fields). While the options are shown the user would still be able to type, with the arrow keys, they can select an option. The option would than replace the word with its value prefixed with a '@' and postfixed with an empty space.

All the tutorials I have found only have react-select being used with single line inputs similar to the Tags input below.

desired result

Answer 1

I don't think react-select is the correct plugin you should use given the examples you mentioned. Maybe you should take a look to a library like react-textarea-autocomplete (you can try a live example here ).

Answer 2

for username, you can use this attribute: autocomplete="username"

you can check for more options here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete