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

• Create action

  • Add search parameter of type String

  • Configure action to return filtered data

• In your view, add Options component

  • Enable Allow custom value and/or search

  • In the subsection, set Type to Search only (or as you need)

  • Disable Search on client

• In your view, add Data from action

  • Set it to your action that returns filtered items

  • Link the search parameter to the customValue property of the Options component

• In your Options component

  • Link Items to the data from your action.

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 ($.params.search) {
  return items.filter((x) => {
    return x.labelText.value.includes($.params.search);
  });
} 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.

• Set ID to optionsField

• Enable Allow custom value and/or search

• In the subsection, set Type to Search only (or as you need)

• Set Placeholder to Search...

• Disable Search on client

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.

optionsField.customValue

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.

4. Link Completion Items to Options Component

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:

completionItems.data

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.