---
title: "Use the SearchRequest method"
slug: "use-the-searchrequest-method"
abstract: "How to configure the external component to let users interact with the SearchRequest method."
---
# Use the SearchRequest method

This example shows how an **External** component can be used to let users interact with the `SearchRequest` before it is sent to the server. For this code to work properly, the settings of the [**Search** component](https://doc.sitecore.com/ch/en/users/content-hub/search.html "Search") must be modified using the Entity management API. The settings require an advanced property on the highest level with the following value: `advanced:{"waitForEvent":true}`. This flag is currently not exposed in the interface.

> [!warning]
> To avoid creating a recursive loop, modify the `SearchRequest` object directly rather than calling `api.search.addFilters`.

```typescript
const disposeFuncs: Array<Function> = [];

 export default function createExternalRoot(container: HTMLElement) {
   return {
     render(context: any) {
       const {
         api,
        config: { searchIdentifier },
         options,
       } = context;

       // 1. Add the event listener for the search component.
       const disposeFunc = api.search.addListener(
         searchIdentifier,
         "BEFORE_SEARCH",
         ({ searchRequest }) => {
           // Do something with searchRequest here; e.g. modify a field name of a filter.
         }
       );
       // 2. Store the dispose function.
       disposeFuncs.push(disposeFunc);

       // 3. Activate the search component.
       api.search.activate(searchIdentifier);
     },
     unmount() {
       disposeFuncs.forEach(dispose => dispose());
     },
   };
 }

```