Jorge Perez
Jorge Perez

Reputation: 1

Text field auto suggest username with react-select

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

Upvotes: 0

Views: 1526

Answers (2)

Adnan Ahmed
Adnan Ahmed

Reputation: 17

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

Upvotes: 0

Laura
Laura

Reputation: 8630

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).

Upvotes: 1

Related Questions