How to use the @material-ui/lab/Autocomplete.createFilterOptions 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 / Filter.tsx View on Github 
/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option: FilmOptionType) => option.title,
});
export default function Filter() {
return (
option.title}
filterOptions={filterOptions}
style={{ width: 300 }}
renderInput={params => (
)}
/>/* eslint-disable no-use-before-define */
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: option => option.title,
});
export default function Filter() {
return (
option.title}
filterOptions={filterOptions}
style={{ width: 300 }}
renderInput={params => (
)}
/>import React from 'react'
import TextField from '@material-ui/core/TextField'
import Checkbox from '@material-ui/core/Checkbox'
import CheckBoxIcon from '@material-ui/icons/CheckBox'
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
import Autocomplete, {
createFilterOptions,
} from '@material-ui/lab/Autocomplete'
import { useGetList, useTranslate } from 'react-admin'
import PropTypes from 'prop-types'
import { isWritable } from '../common'
import { makeStyles } from '@material-ui/core'
const filter = createFilterOptions()
const useStyles = makeStyles({
root: { width: '100%' },
checkbox: { marginRight: 8 },
})
export const SelectPlaylistInput = ({ onChange }) => {
const classes = useStyles()
const translate = useTranslate()
const { ids, data } = useGetList(
'playlist',
{ page: 1, perPage: -1 },
{ field: 'name', order: 'ASC' },
{}
)@material-ui/lab
Material-UI Lab - Incubator for Material-UI React components.
