How to autofill an input text field from a list of options as the user is typing

Ask us anything How do I?
1

I have an input field that is to be populated from a dropdown menu with a list of options, but the list can be very long. I want the user to be able to simply start typing a letter or two and the field to pre-populate or provide a suggestion with the first partial match in the list, then simply Enter to select it. Is there a way to do this?

Right now, the user has to scroll down the menu and select, but it’s not a great experience for longer lists.

2

You could try filtering the list of options by what they have typed in the input. I don’t think that would solve the enter to select it. Another option which I have done before is to create a custom dropdown component that has an input and a list of options underneath it I did this so that people could create there own new responses rather then selecting from the dropdown.

Hope this gives you some ideas.