Skip to main content
OutSystems

How to create a search field with autocomplete

Question

Is there any way to implement auto-search combo box outside an edit screen.

On the forum, I learn that you can implement an auto-search combo-box only on an edit screen with scaffolding implemented. But I don’t have a scaffolding screen neither a edit screen. I just have a combo-box with the preparation data binded.

Answer

Here's an example of an autocomplete with a list of users.

First you need a local variable to hold the value that the user writes in the screen. In this example, I'm expecting the user to write a username...

autocomplete.png

Then you add an input and associated that input with the variable. Don't forget to name your input because it will be necessary in the next step.

autocomplete2.png

Alongside with the input add the richwidgets "Input_AutoComplete" webblock to the screen. This webblock has a number of inputs...

autocomplete3.png

In the first one, "InputWidgetId" you need to add the ID of the input that will have the autocomplete behaviour. This ID is the name of your input followed by ".id".

Then you have the "Destination"; this is the action where you will query for the values you want to show on the drop down below the input field. Just create a new action and rename it for something meaningful.

autocomplete4.png

Now let's move to the action "GetValuesForAutoComplete". In this action you need two local variables. One record and one record list, both with "Record Definition" set to Input_AutoComplete_ListEntry.

autocomplete5.png

autocomplete6.png

First thing to do inside the action is to search for your users. In this example I'm searching for users based on the value that the user wrote on screen

autocomplete7.png

And inside the query I'm using a parameter with the "Is search parameter" set to true...

autocomplete8.png

This query will return a list of users that we want to show on the autocomplete list. To do that, we need to add those to the record list variable that we've created before. I'll iterate through the result of the query, add the id and the name of the user to the Input_AutoComplete_ListEntry var and then add that one to the record list Input_AutoComplete_List

The action at a high level...

autocomplete9.png

inside the assign...

autocomplete10.png

and inside the list append...

autocomplete11.png

The record list now holds the values that you want to show on screen. To show it, just use the "Input_AutoComplete_ShowList" action from RichWidgets and the list will appear on screen.

autocomplete12.png

With that, you have the screen showing the list that comes from the query

autocomplete13.png

Now, usually you will need to know what's the ID of the selected element in the autocomplete box. There's an action for that in RichWidgets named "Input_AutoComplete_GetIdentifier". You can use it in an action, give it the id of the input just like before and you get the selected identifier.

autocomplete14.png