# Vehicle Search Small

### Overview <a href="#overview" id="overview"></a>

The `VehicleSearchSmall` component is a lightweight vehicle search form that provides a simplified interface with basic filtering options. It's designed for minimal space usage while still allowing users to search for vehicles by key criteria.

### Installation <a href="#installation" id="installation"></a>

The component is part of the Carpose application and requires no separate installation.

### Usage <a href="#usage" id="usage"></a>

To use the VehicleSearchSmall component in a standard HTML page:

```html
<div 
  data-carpose-component="vehicle-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/search-results"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIifQ=="
></div>
```

### Configuration Attributes <a href="#configuration-attributes" id="configuration-attributes"></a>

The component reads configuration from data attributes on the provided element:

| Attribute                      | Type   | Default | Description                                                                                                         |
| ------------------------------ | ------ | ------- | ------------------------------------------------------------------------------------------------------------------- |
| `data-carpose-component`       | string | -       | Identifies the component type, must be set to "car-search-small"                                                    |
| `data-api-key`                 | string | -       | API key for authentication with the Carpose backend services. Required for data fetching.                           |
| `data-search-url-forward`      | string | null    | URL to forward to when search button is clicked. Required for redirecting to the full search results page.          |
| `data-default-form-state-hash` | string | null    | Default form state hash to use when initializing the form. If not provided, a new empty form state will be created. |

### Features <a href="#features" id="features"></a>

* Filtering by manufacturer, model, and condition
* Real-time vehicle count display
* Search button to redirect to full search results
* Responsive layout that adapts to different screen sizes

### Examples <a href="#examples" id="examples"></a>

#### Basic Example <a href="#basic-example" id="basic-example"></a>

```html
<!-- Basic implementation with required attributes -->
<div 
  data-carpose-component="vehicle-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/vehicles"
></div>
```

#### With Default Form State <a href="#with-default-form-state" id="with-default-form-state"></a>

```html
<!-- Implementation with default form state (pre-selected manufacturer) -->
<div 
  data-carpose-component="vehicle-search-small"
  data-api-key="your-api-key"
  data-search-url-forward="/vehicles"
  data-default-form-state-hash="eyJtYW51ZmFjdHVyZXIiOiIxIn0="
></div>
```

### Behavior <a href="#behavior" id="behavior"></a>

1. **Search Mode**:
   * When the search button is clicked, the component redirects to the URL specified in `data-search-url-forward` with the form state hash appended.
   * The full search page will load with the current filters applied.
2. **Form Initialization**:
   * The form is initialized with the default state from `data-default-form-state-hash` if provided.
   * If not provided, an empty form state is created.
3. **Real-time Count**:
   * As filters are changed, the vehicle count updates in real-time to show available matches.


---

# 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.carpose.de/vehicle-search-modules/vehicle-search-small.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.