Async Search Verification
Shared Lazy Load Field Debug Surface
Use this local page to verify the shared AJAX lazy-load field before wiring it into production flows. Each example uses the same component with different debounce, button, and loading settings.
Manual trigger
Search only when the user explicitly submits
Debounce is disabled here so only button clicks and Enter presses issue requests. Repeated clicks are locked while the request is in flight.
Type at least 2 characters, then press Enter or use the button to trigger the request.
Sample matches
Matching demo items are rendered here after each successful request.
Trigger a request to inspect matching sample items.
Request telemetry
The latest emitted event payload for this field instance is shown here.
Queued query
None
{}
Debounced trigger
Queue follow-up searches behind an active request
This example automatically searches after a short pause. If the query changes while one request is still running, the latest query waits and runs next.
Pause after typing to fire a debounced request without losing focus from the input.
Sample matches
Matching demo items are rendered here after each successful request.
Trigger a request to inspect matching sample items.
Request telemetry
The latest emitted event payload for this field instance is shown here.
Queued query
None
{}
Dropdown results
Render lazy-loaded matches as an interactive dropdown
This example uses the shared field exactly as a consumer would, then renders the returned items as a dropdown under the input instead of a static result list.
Type at least 3 characters, wait for the debounced request, then pick one of the returned options from the dropdown.
Selected dropdown result
Choose an option from the dropdown to hydrate the input with that result and inspect the selected payload here.
No dropdown result selected yet.
Request telemetry
The latest emitted event payload for this field instance is shown here.
Queued query
None
{}
Custom action
Preset values, validation, and error-state overrides
This example starts with a preset value, overrides the placeholder and suffix action, validates both minimum and maximum lengths, and intentionally fails once so the component can surface an AJAX error state.
Use a Nairobi landmark, delivery note, or region term. The first request on this example fails once to demonstrate the danger-state UI.
State override previews
These previews show the component with a disabled state and an explicit error state passed in from the host view.
This instance shows a preset value and placeholder while the field and suffix button remain disabled.
This instance shows how the host can pass a danger state and message without waiting for an AJAX request.
The supplied search term is too short for this field configuration.
Validation and failure notes
The shared field now accepts both input-state props and component-level validation settings.
- Minimum length is set to 3 characters before search requests can start.
- Maximum length is set to 18 characters, and longer input triggers the danger state immediately.
- The first custom search request fails once, then the next retry succeeds and clears the error state.
Sample matches
Matching demo items are rendered here after each successful request.
Trigger a request to inspect matching sample items.
Request telemetry
The latest emitted event payload for this field instance is shown here.
Queued query
None
{}