https://github.com/melanieseltzer/example-async-combobox-options
https://github.com/shadcn-ui/ui/issues/1391
https://github.com/melanieseltzer/example-async-combobox-options
Last synced: 7 months ago
JSON representation
https://github.com/shadcn-ui/ui/issues/1391
- Host: GitHub
- URL: https://github.com/melanieseltzer/example-async-combobox-options
- Owner: melanieseltzer
- Created: 2023-09-05T05:29:08.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-14T01:41:20.000Z (over 2 years ago)
- Last Synced: 2025-06-22T00:40:10.437Z (9 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.58 MB
- Stars: 47
- Watchers: 1
- Forks: 6
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-shadcnui - Github
README
## Example async Combobox options
Small demo of a [shadcn/ui Combobox](https://ui.shadcn.com/docs/components/combobox) that has async items.
The `` component is [cmdk component](https://github.com/pacocoursey/cmdk/) by pacocoursey under the hood.
For this demo, it uses [dummyjson api](https://dummyjson.com) for simulating product data search, example query: `https://dummyjson.com/products/search?q=iphone`
Some key features/notes (specific for my usecase):
- Simulated delay for the API call (just to see loading/error/no results UI).
- Debounced search input so the API isn't hit on every keystroke.
- Hides the search results piece if there's no search query (I didn't want this constantly showing in the UI).
- Disables filtering and sorting on `` with `shouldFilter={false}`. The results from the API is the filter itself (no results from the API = no match for the search term).
## Run demo
```bash
yarn install
```
then
```bash
yarn dev
```