How to use the @material-ui/lab/useAutocomplete function in @material-ui/lab
To help you get started, we’ve selected a few @material-ui/lab examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mui-org / material-ui / docs / src / pages / components / autocomplete / UseAutocomplete.tsx View on Github 
export default function UseAutocomplete() {
const classes = useStyles();
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>
useAutocomplete
</label>
<input>
</div>
{groupedOptions.length > 0 ? (
<ul>
{groupedOptions.map((option, index) => (</ul></div>export default function CustomizedHook() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getTagProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused,
setAnchorEl,
} = useAutocomplete({
id: 'customized-hook-demo',
defaultValue: [top100Films[1]],
multiple: true,
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>Customized hook</label>
{value.map((option: FilmOptionType, index: number) => (
))}
<input></div></div>export default function UseAutocomplete() {
const classes = useStyles();
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>
useAutocomplete
</label>
<input>
</div>
{groupedOptions.length > 0 ? (
<ul>
{groupedOptions.map((option, index) => (</ul></div>export default function CustomizedHook() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getTagProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused,
setAnchorEl,
} = useAutocomplete({
id: 'customized-hook-demo',
defaultValue: [top100Films[1]],
multiple: true,
options: top100Films,
getOptionLabel: option => option.title,
});
return (
<div>
<div>
<label>Customized hook</label>
{value.map((option, index) => (
))}
</div></div>@material-ui/lab
Material-UI Lab - Incubator for Material-UI React components.
