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:
Configuration Attributes
The component reads configuration from data attributes on the provided element:
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
Behavior
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.
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.
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.
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.
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.
Last updated