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•16mo 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•16mo ago

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

genetic-orangeOP•16mo 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•16mo 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•16mo ago

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

genetic-orangeOP•16mo ago

Nice, ty works like charm