Support Topics Documentation Slack YouTube Blog

Creating an autocomplete input

How would I make an input field with autocomplete from the database in UI Builder?

Hello @Michiel_Prins

At this moment there is no such component, however, I’ve created an internal ticket BKNDLSS-24749 to discuss it with the team

Regards, Vlad

For the time being I have created a block with Dynamic List Behaviour, that shows text items with results from the database. Let me explain for anyone who needs autocomplete. Using this as an example, you can create a super flexible search. It can potentially use much les space for your autocomplete items because you could have more than one per line.

Instead of a select I’m using an Input with an On Change Event that checks if you have typed anything (length > 0). If so, it loads content from the database and turns the visibility of the results block (positioned directly under the input) to True:

If you click on an item in the results block, I add that object to a list and hide the results block and I show a Block with the items you clicked with a button to delete items.

During search:

image
(blurred search results for obvious reasons)

After click that changes to:

image

And because this is a multiselect you can search again:

image

I hope this can help someone.

1 Like

Thank you for providing this!