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