rare-sapphire
rare-sapphire4mo ago

how to use autocomplete hook for mantine

how to use autocomplete hook for mantine
2 Replies
kapa.ai
kapa.ai4mo ago
Hi @japope. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the useSelect hook documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-select/) for more information on how to implement autocomplete functionality with Mantine in refine. If you are looking for an example of how to add search to options (Autocomplete) using the useSelect hook, here is a relevant code snippet from the documentation:
import { useSelect } from "@refinedev/mantine";
import { Select } from "@mantine/core";

interface ICategory {
id: number;
title: string;
}

const ProductCreate: React.FC = () => {
const { selectProps } = useSelect<ICategory>({
resource: "categories",
onSearch: (value) => [
{
field: "title",
operator: "contains",
value,
},
],
});

return (
<Select
label="Category"
placeholder="Select a category"
withinPortal
{...selectProps}
/>
);
};
import { useSelect } from "@refinedev/mantine";
import { Select } from "@mantine/core";

interface ICategory {
id: number;
title: string;
}

const ProductCreate: React.FC = () => {
const { selectProps } = useSelect<ICategory>({
resource: "categories",
onSearch: (value) => [
{
field: "title",
operator: "contains",
value,
},
],
});

return (
<Select
label="Category"
placeholder="Select a category"
withinPortal
{...selectProps}
/>
);
};
For more detailed information, you can visit the useSelect hook documentation (https://refine.dev/docs/ui-integrations/mantine/hooks/use-select/#onsearch). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4mo ago
<@465923409973477386> kapa.ai is still learning and improving, please let us know how it did by reacting below