user image

Jo Micheal
Published in : 2021-12-22

[solved] Render/Show a custom option in Autocomplete Material UI?

React js

How can i render a custom option of AutoComplete component in Material UI? i'd like to show the option with small text beside it using the span tag in HTML ? like the list below 

How can I handle this?

Comments

Mohamed Atef Date : 2021-12-22

Best answers

46

Best answers

46

Welcome Back, 
You can show custom render option in the AutoComplete in Material UI using renderOption with React.Fragment

like

  renderOption={(option) => (
    <React.Fragment>
      <Markup content={option.name + `<span >${option.type}<span>`} />
    </React.Fragment>                 
  )}

the entire code will looks like 

<Autocomplete
  filterOptions={filterOptions}
  options={this.state.dropdown}
  // getOptionLabel={(option) => { return option.title || '' } }
  groupBy={(option) => option.type}
  getOptionLabel={(option) => option.name || ''}
  renderOption={(option) => (
    <React.Fragment>
      <Markup content={option.name + `<span >${option.type}<span>`} />
    </React.Fragment>                 
  )}
  // closeIcon= { () => { return; } }
  renderInput={(params) => (
    <TextField {...params} placeholder="" value={values.search} label="" name="search" />
  )}
  onChange={ (e, obj) => { console.log(obj); setFieldValue('search', obj); } }
/>

Let me know if you have another questions

 

Jo Micheal Date : 2021-12-22

Thank you so much!

Leave a comment

Join us

Join our community and get the chance to solve your code issues & share your opinion with us

Sign up Now

Related posts

Reload browser window using Reactjs?
Publish date: 2022-02-08 | Comments: 4

Tag: React js

Export 'Switch' (imported as 'Switch') was not found in 'react-router-dom'
Publish date: 2022-04-02 | Comments: 2

Tag: React js

npm install @mui/material returns error
Publish date: 2022-04-02 | Comments: 1

Tag: React js

[solved] Reactjs is not updating the props
Publish date: 2022-02-04 | Comments: 2

Tag: React js

import link as router link from 'react-router-dom' Reactjs
Publish date: 2021-09-30 | Comments: 3

Tag: React js

[solved] useEffect is repeating the request Reactjs
Publish date: 2022-04-07 | Comments: 2

Tag: React js