کمبوباکس آنلاین
combobox-asyncکامپوننتجستوجوی سمت سرور با debounce، لغو درخواستهای قدیمی و حالتهای بارگذاری، خالی و خطا، مناسب شهر و محصول.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add combobox-asyncنصب دستی
محتوای تب «کد» را در
components/ui/combobox-async.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { ComboboxAsync } from "@/components/ui/combobox-async"23<ComboboxAsync4 placeholder="نام شهر…"5 loadOptions={async (q, signal) => {6 const res = await fetch(`/api/cities?q=${encodeURIComponent(q)}`, { signal })7 return res.json() // [{ value, label, hint }]8 }}9 onChange={setCity}10/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| loadOptions | (q, signal) => Promise<Option[]> | - | با signal درخواست قدیمی را لغو کنید. |
| debounce / minChars | number | 250 / 1 | تأخیر و حداقل حروف. |