Car Search (KI)

Overview

The Intelligent Search component provides a natural language search interface for vehicles. It allows users to search for cars using conversational queries rather than structured filters, making it more intuitive and user-friendly.

Installation

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

Usage

To use the Intelligent Search component in a standard HTML page:

<div 
  data-carpose-component="intelligent-search"
  data-api-key="your-api-key"
></div>

Configuration Attributes

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 "intelligent-search"
data-api-key	string	-	API key for authentication with the Carpose backend services. Required for data fetching.

Features

• Natural language search input for intuitive queries

• Results displayed as car cards with vehicle details

• Sorting options for search results:

  • Price (ascending/descending)

  • Mileage (ascending/descending)

  • Power (ascending/descending)

• Pagination for navigating through search results

• Loading indicators during search

• "No results" message when no matching vehicles are found

• Session storage persistence for search state (query, page, sorting)

Example

<div 
  data-carpose-component="intelligent-search"
  data-api-key="your-api-key"
></div>

Behavior

1. Search Interface:

   • The component displays a prominent search input with a placeholder suggesting example queries.

   • Users can type natural language queries like "I'm looking for a city car" or "Show me SUVs with less than 50,000 km".

   • The search button triggers the query and displays loading indicators during the search process.

2. Results Display:

   • Search results are displayed as car cards below the search interface.

   • Each car card shows key information about the vehicle.

   • A count of total matching vehicles is displayed above the results.

   • If no matching vehicles are found, a friendly message is displayed.

3. Sorting and Pagination:

   • Once results are displayed, a sorting dropdown appears allowing users to sort by price, mileage, or power.

   • If there are more than 30 results, pagination controls appear at the bottom of the page.

   • Changing the sort order resets to the first page of results.

   • Clicking a pagination number fetches the corresponding page of results.

4. State Persistence:

   • The component stores the current search query, page number, and sorting preference in session storage.

   • If the user leaves and returns to the page, their previous search state is restored.

   • This allows users to continue browsing from where they left off.

5. Responsive Behavior:

   • The component adapts to different screen sizes.

   • On mobile devices, the sorting control appears above the results count for better usability.

Integration with Other Components

The Intelligent Search component uses the CarCard component to display search results, providing a consistent user experience across the application. When users click on a specific vehicle in the results, they are taken to the Car Detail view for that vehicle.