# Server-side Dropdown Autocompletion

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.

<details>

<summary>TL;DR - Quick steps</summary>

* [ ] 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.

</details>

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

```javascript
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:

<figure><img src="/files/amoU5zh6yaGD8oeS2SET" alt=""><figcaption></figcaption></figure>

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

<img src="/files/CuJ4uTayo9nIgunvTKeh" alt="" data-size="original">

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

<img src="/files/yFZCX08jqYVGrZQkvMqw" alt="" data-size="original">

### 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
```

![](/files/SMzhUvJLfTNsoxIS3gIH)

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

<figure><img src="/files/kUg6GYlvdLaTlZgLQnVC" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/data-and-dynamic-values/server-side-dropdown-autocompletion.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.