Autocomplete text input

I would like to have an autocomplete functionality. Similar to Google.com - when you start typing it will immediately show results.

For the time being, is there a way to achieve this maybe with a custom component?

2 Likes

I combined two of their components. My use case is to suggest similar mobile numbers from system, so I run a elastic search query on input change and show suggestions on a listbox.

1 Like

Thank you @sourav. Your use case inspired me to explore the components.

@nevil I found a way to implement an autocomplete dropdown searchbox:

I setup a container, and placed my texinput and listbox components in it.

I mapped the listbox values to an sql query to populate with values in a column in my database that are similar to the values in the input text. ( select * from xxx where xxx ilike {{'%' + 'textinputLabel' + '%'}} )

Next, I set event triggers on the textinput:
a) Show listbox upon changes in input
b) Hide listbox when input text is not in the search query array (set the trigger to when listbox.data == 0)

Next, I set an event trigger to the listbox to control the textinput component, to set value to listbox.value

UX:

  1. When user starts typing in the textinput, the contain is displayed, showing the listbox and search result.

  2. When option is selected, the texinput is populated with the selected value, and the container is closed

  3. When the input text is not in the listbox array, it displays 'No Result' (which you can set in the component settings), and triggers the container to close.

I hope this is helpful to anyone seeking to implement same.

Thank you to the Retool team for making this possible.

5 Likes