Skip to main content

How to create a search field with autocomplete


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.


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...


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.


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


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.


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.



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


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


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...


inside the assign...


and inside the list append...


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.


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


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.