How can I implement autosuggest/search and select in a text component?

I’m trying to implement a autosearch/select feature where the user can start typing and makes suggestions to select based on that search. Does this already exist or how can I do this?

1 Like

Hey Alex,

While it may be possible to implement with a text input, I think that you might want to use the Dropdown component instead.

image

This component allows you to have a pre-set list of values that the user can select from, as well as search by typing. You can also enable custom entry so that the user may enter something that is not already in the list if desired.

The select component also has a .searchValue property that you could pull in to other queries!

3 Likes

How can I implement it for Google Place Search API? Where text field is search text for google place search string

1 Like

how implement *search by typing?

Hey @agaitan026! In a dropdown "Select" component, fuzzy search should be automatically implemented.

Or are you interested in setting up search in a "Table" component, for example?

To accomplish this, you basically just need to write a SQL query like:

select * from your_table
WHERE ({{ !textinput1.value }} OR first_name ilike {{'%' + textinput1.value + '%'}})
AND ({{ !textinput2.value }} OR last_name ilike {{'%' + textinput2.value + '%'}})
AND ({{ !textinput3.value }} OR actor_id = {{ textinput3.value }})

and show the results of that data in your table!

See attached app JSON if you want to poke around with my setup! You can import this JSON file by clicking Create new (home page) > From JSON. Quick docs on exporting/importing apps here.

And let me know if you have any other questions!
fuzzy-20search-20table.json

2 Likes

Is this option available with the mobile app? I couldn't see it there.

After some testing, it looks like this is available on the Multiselect component as is or on the Select component if you enable "Allow custom value". Let me know if this helps at all!