Server-side Dropdown Autocompletion

You can

You can configure the Options component to load items dynamically based on user value (search).

To do that, you need to prepare an Action with a search parameter that will return filtered items. Then you need to add that action as a Data Source into your view. And finally, you have to link the data source with your Options component and configure it properly. Let's do a quick example.

TL;DR - Quick steps

1. Create Action

Let's create an action called GetCompletionItems. It will have a search parameter of type String and one Transform Node with the following JavaScript code. Data returned from this transform node are directly compatible with the Options component's property items.

In a real case, you will have to set up the action in a way that matches your needs, this is just an example.

const createItem = (value, label) => ({
  value: value,
  labelText: {
    value: label

const items = [
  createItem("testA", "Test A"),
  createItem("testB", "Test B"),
  createItem("testC", "Test C"),
  createItem("anotherTestA", "Another Test A"),
  createItem("anotherTestB", "Another Test B"),
  createItem("anotherTestC", "Another Test C")

if ($ {
  return items.filter((x) => {
    return x.labelText.value.includes($;
} else {
  return items;

The action will look like this:

You can Run the action to verify it works correctly.

2. Add Options Component

Next, let's add an Options component to your View and configure it as follows.

3. Add Data Source

Now, in your view, add Data from action and in the inspector, select the action you've created in the first step - GetCompletionItems.

Change the data source ID to completionItems.

Then link the search parameter to the customValue property of the Options component. To do that, set the search parameter to fx and enter the following expression.


The customValue property contains a text a user enters during the search. So when the user is searching, this expression will update the action parameter, and new completion items will be loaded.

The final step is to link data from the action to the Options component's items.

Select the Options component and configure the Items property to fx, and enter the expression:

5. Test It

Then switch to the Preview mode and click on the Options component. You should see all the items, and when you start typing into the search field, only the matching items should be visible.

Last updated