Just one more example of how to use shadcn/ui to create a custom autocomplete component.
I talk about it on this video: https://youtu.be/1hfd9CKbv7E
function App() {
const [searchValue, setSearchValue] = useState<string>("");
const [selectedValue, setSelectedValue] = useState<string>("");
const { data, isLoading } = useQuery({
queryKey: ["data", searchValue],
queryFn: () => getList(searchValue),
});
return (
<AutoComplete
selectedValue={selectedValue}
onSelectedValueChange={setSelectedValue}
searchValue={searchValue}
onSearchValueChange={setSearchValue}
items={data ?? []}
// Optional props
isLoading={isLoading}
emptyMessage="No items found."
placeholder="Search items..."
/>
);
}
Took inspiration from this issue and this example.