Text field auto suggest username with react-select

0
votes

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

2
javascriptreactjsautocompletereact-select
Could you add some screenshots of what you want to confirm the behaviour ? Thanks – Laura
@Laura i added an image of the desired result please take a look, thanks – Jorge Perez
@Laura I want to implement something like what is shown in this tutorial but in react algolia.com/doc/guides/building-search-ui/resources/… – Jorge Perez

2 Answers

1
votes

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

0
votes

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