Filterdropdown autocomplete

How do you use the filter drop down to search for a value to filter or autocomplete?

5 Replies

Hi @silentnyte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use the filter dropdown to search for a value to filter or autocomplete, you can use the useAutocomplete hook provided by refine. This hook can be used independently of the useForm hook. Here is an example of how to use it:

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const PostCreate: React.FC = () => {  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 onSearch: (value) => [  
 {  
 field: "title",  
 operator: "contains",  
 value,  
 },  
 ],  
 });  
  
 return (  
 <Autocomplete  
 {...autocompleteProps}  
 getOptionLabel={(item) => item.title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 placeholder="Select a category"  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Category"  
 margin="normal"  
 variant="outlined"  
 required  
 />  
 )}  
 />  
 );  
};

import { useAutocomplete } from "@refinedev/mui";  
import { Autocomplete, TextField } from "@mui/material";  
  
interface ICategory {  
 id: number;  
 title: string;  
}  
  
const PostCreate: React.FC = () => {  
 const { autocompleteProps } = useAutocomplete<ICategory>({  
 resource: "categories",  
 onSearch: (value) => [  
 {  
 field: "title",  
 operator: "contains",  
 value,  
 },  
 ],  
 });  
  
 return (  
 <Autocomplete  
 {...autocompleteProps}  
 getOptionLabel={(item) => item.title}  
 isOptionEqualToValue={(option, value) =>  
 value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()  
 }  
 placeholder="Select a category"  
 renderInput={(params) => (  
 <TextField  
 {...params}  
 label="Category"  
 margin="normal"  
 variant="outlined"  
 required  
 />  
 )}  
 />  
 );  
};

In this example, the onSearch function is used to filter the options. When a value is entered, it filters the options where the title contains the entered value. The autocompleteProps are then spread into the Autocomplete component from Material UI. Please note that if onSearch is used, it will override the existing filters. For more information, you can refer to the useAutocomplete documentation (https://refine.dev/docs/api-reference/mui/hooks/useAutocomplete/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•9mo ago

<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below

other-emerald•8mo ago

@kapa.ai how do you sort the filterdropdown?

kapa.ai•8mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To sort the options in the filter dropdown, you can use the sorters property provided by refine. This property allows you to show the options in the desired order. It will be passed to the getList method from the dataProvider as a parameter via the useList hook and used to send sort query parameters to the API. Here is an example of how to use it:

const { selectProps } = useSelect<ICategory>({  
 resource: "categories",  
 sorters: [  
 {  
 field: "title",  
 order: "asc",  
 },  
 ],  
});

const { selectProps } = useSelect<ICategory>({  
 resource: "categories",  
 sorters: [  
 {  
 field: "title",  
 order: "asc",  
 },  
 ],  
});

In this example, the sorters property is used to sort the categories by title in ascending order. The selectProps are then spread into the Select component. For more information, you can refer to the useSelect documentation (https://refine.dev/docs/api-reference/core/hooks/useSelect/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@395261846862561301> kapa.ai is still learning and improving, please let us know how it did by reacting below