sensitive-blue
sensitive-blue9mo ago

How to make MUI Autocomplete multiple

Like in topic, how to be able to let Autcoomplete using multiple values instead of one?
6 Replies
kapa.ai
kapa.ai9mo ago
Hi @sensib0i. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To allow the Autocomplete component to select multiple values, you can use the multiple prop in the Autocomplete component. Here is an example of how to do it:
import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';

// Top 5 Nigerian songs on Apple Music
const top5Songs = [
{ title: 'Organise'},
{ title: 'Joha'},
{ title: 'Terminator'},
{ title: 'Dull'},
{ title: 'Nzaza'},
];

export default function Tags() {
return (
<Stack spacing={3} sx={{ width: 300 }}>
<Autocomplete
multiple
id="tags-standard"
options={top5Songs}
getOptionLabel={(option) => option.title}
defaultValue={[top5Songs[2]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>
</Stack>
);
}
import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';

// Top 5 Nigerian songs on Apple Music
const top5Songs = [
{ title: 'Organise'},
{ title: 'Joha'},
{ title: 'Terminator'},
{ title: 'Dull'},
{ title: 'Nzaza'},
];

export default function Tags() {
return (
<Stack spacing={3} sx={{ width: 300 }}>
<Autocomplete
multiple
id="tags-standard"
options={top5Songs}
getOptionLabel={(option) => option.title}
defaultValue={[top5Songs[2]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>
</Stack>
);
}
In this example, the multiple prop is used in the Autocomplete component, which allows the user to select more than one value. The defaultValue prop is also used to set a default option value. For more information, you can refer to the source (https://refine.dev/blog/material-ui-autocomplete-component/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai9mo ago
<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below
sensitive-blue
sensitive-blue9mo ago
@kapa.ai how to use it inside form? i got code like this
<Controller
control={control}
name="tags_ids"
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
multiple
{...productTagsAutocompleteProps}
{...field}
// onChange={(_, value) => {
// field.onChange(value?.id ?? value);
// }}
// getOptionLabel={(item) => {
// return (
// productCategoryAutocompleteProps?.options?.find(
// (p) => p?.id?.toString() === item?.id?.toString()
// )?.name ?? ""
// );
// }}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label={translate("products.fields.tags_ids")}
margin="normal"
variant="standard"
error={!!(errors as any)?.tags_ids}
helperText={(errors as any)?.tags_ids?.message}
/>
)}
/>
)}
/>
<Controller
control={control}
name="tags_ids"
// eslint-disable-next-line
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
multiple
{...productTagsAutocompleteProps}
{...field}
// onChange={(_, value) => {
// field.onChange(value?.id ?? value);
// }}
// getOptionLabel={(item) => {
// return (
// productCategoryAutocompleteProps?.options?.find(
// (p) => p?.id?.toString() === item?.id?.toString()
// )?.name ?? ""
// );
// }}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label={translate("products.fields.tags_ids")}
margin="normal"
variant="standard"
error={!!(errors as any)?.tags_ids}
helperText={(errors as any)?.tags_ids?.message}
/>
)}
/>
)}
/>
kapa.ai
kapa.ai9mo ago
Let me check the knowledge base for you. One moment! :books: ---------------------- To use the Autocomplete component with multiple values inside a form, you can use the Controller component from react-hook-form. The Controller component allows you to integrate third-party input components with react-hook-form. In your code, you are already using the Controller component correctly. However, you need to uncomment the onChange prop in the Autocomplete component and modify it to handle multiple values. Here is how you can do it:
<Controller
control={control}
name="tags_ids"
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
multiple
{...productTagsAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label={translate("products.fields.tags_ids")}
margin="normal"
variant="standard"
error={!!(errors as any)?.tags_ids}
helperText={(errors as any)?.tags_ids?.message}
/>
)}
/>
)}
/>
<Controller
control={control}
name="tags_ids"
defaultValue={null as any}
render={({ field }) => (
<Autocomplete
multiple
{...productTagsAutocompleteProps}
{...field}
onChange={(_, value) => {
field.onChange(value);
}}
getOptionLabel={(option) => option.label}
renderInput={(params) => (
<TextField
{...params}
label={translate("products.fields.tags_ids")}
margin="normal"
variant="standard"
error={!!(errors as any)?.tags_ids}
helperText={(errors as any)?.tags_ids?.message}
/>
)}
/>
)}
/>
In the onChange prop, you don't need to access the id property of value because value is an array of selected options when the multiple prop is true. You just need to pass the value directly to field.onChange. For more information, you can refer to the source (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
kapa.ai9mo ago
<@667849704293269515> kapa.ai is still learning and improving, please let us know how it did by reacting below
sensitive-blue
sensitive-blue9mo ago
Nice, ty works like charm