---
metaTitle: Search component | AwesCode UI
meta:
  - name: description
    content: The <AwSearch /> component is used to render Search - UI Vue component for AwesCode UI.
title: Search
---

# AwSearch

**Category:** Organism | **Import:** Dynamic

The `AwSearch` component is a search input field that automatically syncs with the URL query string. It provides debounced search updates, global keyboard shortcut support, and automatic query parameter management.

## Overview

`AwSearch` provides a search input solution with:
- Automatic URL query string synchronization
- Debounced input updates
- Global keyboard shortcut (default: `/`)
- Clear button when search is active
- Route query parameter management
- Exclude specific query keys from clearing

## Usage

### Basic Example

```markup
<AwSearch />
```

### Custom Query Parameter

```markup
<AwSearch param="q" />
```

### Custom Debounce

```markup
<AwSearch :debounce="800" />
```

### Disable Global Key Bind

```markup
<AwSearch :global-key-bind="false" />
```

### Custom Global Key

```markup
<AwSearch global-key-bind="s" />
```

### Exclude Query Keys

```markup
<AwSearch :exclude="['page', 'limit']" />
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| param | Query parameter name for search value | `String` | `false` | `'search'` |
| debounce | Debounce delay in milliseconds | `Number` | `false` | `400` |
| globalKeyBind | Global keyboard shortcut key (or `false` to disable) | `String` / `Boolean` | `false` | `'/'` |
| exclude | Query keys to preserve when clearing search | `Array` | `false` | `[]` |

**Global Key Bind:**
- When a key is pressed and focus is not on input/textarea, component receives focus
- Default is `/` (common search shortcut)
- Pass `false` or empty string to disable
- Key must be single character

### Slots

This component does not have slots.

### Events

All events from `AwInput` are supported (inherited via `$listeners`).

### Config Options

The component uses default configuration from `@AwConfig`. You can override these defaults in your project's `awes.config.js`:

```javascript
export default {
  AwSearch: {
    baseClass: 'aw-search'
  }
}
```

## Related Components

- `AwInput` - Base input component used internally
- `AwIconSystemMono` - Icon components for search/close buttons

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as an organism
- Search value is automatically synced with `$route.query[param]`
- Input updates are debounced to reduce route updates
- Clear button appears when search parameter exists in URL
- Enter key immediately updates search (bypasses debounce)
- Global key bind only works when focus is not on input/textarea
- Component watches route query changes and updates input value
- Excluded keys are preserved when clearing search
- Uses `cleanRouteQuery` utility for query management
- Search icon shows when no search value, close icon when value exists