import React from
'react'
import TextField from
'@material-ui/core/TextField'
;
import Autocomplete from
'@material-ui/lab/Autocomplete'
;
import parse from
'autosuggest-highlight/parse'
;
import match from
'autosuggest-highlight/match'
;
const App = () => {
const options = [
'Monday Night'
,
'Monday Morning'
,
'Monday Evening'
,
'Monday Afternoon'
]
return
(
<div style={{ marginLeft:
'40%'
, marginTop:
'60px'
}}>
<h3>Greetings from GeeksforGeeks!</h3>
<Autocomplete
id=
"highlights-demo"
style={{ width: 300 }}
options={options}
renderOption={(option, { inputValue }) => {
const matches = match(option, inputValue);
const parts = parse(option, matches);
return
(
<div>
{parts.map((part, index) => (
<span key={index} style={{ fontWeight: part.highlight ? 700 : 400 }}>
{part.text}
</span>
))}
</div>
);
}}
renderInput={(params) => (
<TextField {...params} label=
"Highlights"
variant=
"outlined"
margin=
"normal"
/>
)}
/>
</div>
);
}
export
default
App