Example Async Combobox Options

Shadcn/ui Async Combobox: A Practical Demonstration with Dynamic Data

This project demonstrates how to implement a shadcn/ui Combobox component that loads its options asynchronously. It utilizes the cmdk component internally and showcases features like simulated API delays for realistic loading states, debounced search input to optimize API calls, and conditional visibility of search results. The example uses the dummyjson API to fetch product data, providing a practical look at handling dynamic, server-sourced dropdown options for developers.

Features:

• Asynchronous Item Loading: Fetches Combobox options from an API asynchronously.
• Simulated API Delay: Demonstrates handling of loading states with artificial delays to showcase loading, error, or no results UI.
• Debounced Search Input: Optimizes API usage by delaying requests until the user pauses typing, preventing calls on every keystroke.
• Conditional Search Results Visibility: Hides the search results section when there is no active search query in the input.
• Disabled Command Filtering/Sorting: Utilizes shouldFilter={false} on the Command component, as the API results themselves serve as the filter.
• cmdk Component Integration: Built upon the cmdk component by pacocoursey for core Combobox functionality.
• DummyJSON API Usage: Leverages dummyjson.com for simulating product data search and API responses (e.g., https://dummyjson.com/products/search?q=iphone).

Summary:

This example provides developers with a clear blueprint for integrating asynchronous data sources into the shadcn/ui Combobox. It highlights best practices such as debouncing search queries, managing loading and error states, and customizing the display of search results. By using a simulated API, it offers a practical guide to building more dynamic and user-friendly selection components in modern web applications using shadcn/ui.