오토컴플리트
오토컴플리트 (Autocomplete)
오토컴플리트는 제안된 옵션 패널로 강화된 일반 텍스트 입력 컴포넌트예요. 이 위젯은 단일 줄 텍스트박스의 값을 설정할 때 두 가지 유형의 시나리오에서 유용합니다:
- 텍스트박스의 값이 미리 정의된 허용 값 집합에서 골라져야 하는 경우예요. 예를 들어 위치 필드는 유효한 위치 이름을 담아야 하죠: 콤보 박스 (combo box).
- 텍스트박스에 임의의 값을 담을 수 있지만, 사용자에게 가능한 값을 제안하는 것이 유리한 경우예요. 예를 들어 검색 필드가 비슷하거나 이전 검색을 제안해 사용자 시간을 절약해 줄 수 있죠: 프리 솔로 (free solo).
이 컴포넌트는 "react-select"와 "downshift" 패키지의 개선된 버전을 목표로 해요.
출처: 문서
본문
콤보 박스 (Combo box)
값은 미리 정의된 허용 값 집합에서 골라져야 해요.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import top100Films from './top100Films';
export default function ComboBox() {
return (
<Autocomplete
disablePortal
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
옵션 구조 (Options structure)
기본적으로 컴포넌트는 다음 옵션 구조를 받아들입니다:
interface AutocompleteOption {
label: string;
}
// or
type AutocompleteOption = string;
예를 들어:
const options = [
{ label: 'The Godfather', id: 1 },
{ label: 'Pulp Fiction', id: 2 },
];
// or
const options = ['The Godfather', 'Pulp Fiction'];
하지만 getOptionLabel prop을 제공하면 다른 구조도 사용할 수 있어요.
옵션이 객체라면, 올바른 선택과 하이라이트를 보장하기 위해 isOptionEqualToValue prop을 제공해야 해요. 기본적으로 이 prop은 옵션과 현재 값을 비교할 때 엄격한 동등성(strict equality)을 사용합니다.
:::warning
옵션에 중복 라벨이 있다면, getOptionKey prop으로 고유한 키를 추출해야 해요:
const options = [
{ label: 'The Godfather', id: 1 },
{ label: 'The Godfather', id: 2 },
];
return <Autocomplete options={options} getOptionKey={(option) => option.id} />;
:::
플레이그라운드 (Playground)
다음의 각 예시는 Autocomplete 컴포넌트의 기능 하나를 보여줘요.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Stack from '@mui/material/Stack';
export default function Playground() {
const defaultProps = {
options: top100Films,
getOptionLabel: (option: FilmOptionType) => option.title,
};
const flatProps = {
options: top100Films.map((option) => option.title),
};
const [value, setValue] = React.useState<FilmOptionType | null>(null);
return (
<Stack spacing={1} sx={{ width: 300 }}>
<Autocomplete
{...defaultProps}
id="disable-close-on-select"
disableCloseOnSelect
renderInput={(params) => (
<TextField {...params} label="disableCloseOnSelect" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="clear-on-escape"
clearOnEscape
renderInput={(params) => (
<TextField {...params} label="clearOnEscape" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disable-clearable"
disableClearable
renderInput={(params) => (
<TextField {...params} label="disableClearable" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="include-input-in-list"
includeInputInList
renderInput={(params) => (
<TextField {...params} label="includeInputInList" variant="standard" />
)}
/>
<Autocomplete
{...flatProps}
id="flat-demo"
renderInput={(params) => (
<TextField {...params} label="flat" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="controlled-demo"
value={value}
onChange={(event: any, newValue: FilmOptionType | null) => {
setValue(newValue);
}}
renderInput={(params) => (
<TextField {...params} label="controlled" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="auto-complete"
autoComplete
includeInputInList
renderInput={(params) => (
<TextField {...params} label="autoComplete" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disable-list-wrap"
disableListWrap
renderInput={(params) => (
<TextField {...params} label="disableListWrap" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="open-on-focus"
openOnFocus
renderInput={(params) => (
<TextField {...params} label="openOnFocus" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="auto-highlight"
autoHighlight
renderInput={(params) => (
<TextField {...params} label="autoHighlight" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="auto-select"
autoSelect
renderInput={(params) => (
<TextField {...params} label="autoSelect" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disabled"
disabled
renderInput={(params) => (
<TextField {...params} label="disabled" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="disable-portal"
disablePortal
renderInput={(params) => (
<TextField {...params} label="disablePortal" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="blur-on-select"
blurOnSelect
renderInput={(params) => (
<TextField {...params} label="blurOnSelect" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="clear-on-blur"
clearOnBlur
renderInput={(params) => (
<TextField {...params} label="clearOnBlur" variant="standard" />
)}
/>
<Autocomplete
{...defaultProps}
id="select-on-focus"
selectOnFocus
renderInput={(params) => (
<TextField {...params} label="selectOnFocus" variant="standard" />
)}
/>
<Autocomplete
{...flatProps}
id="readOnly"
readOnly
defaultValue={flatProps.options[13]}
renderInput={(params) => (
<TextField {...params} label="readOnly" variant="standard" />
)}
/>
</Stack>
);
}
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
국가 선택 (Country select)
248개 국가 중 하나를 선택해 보세요.
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function CountrySelect() {
return (
<Autocomplete
id="country-select-demo"
sx={{ width: 300 }}
options={countries}
autoHighlight
getOptionLabel={(option) => option.label}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<Box
key={key}
component="li"
sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
{...optionProps}
>
<img
loading="lazy"
width="20"
srcSet={`https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`}
src={`https://flagcdn.com/w20/${option.code.toLowerCase()}.png`}
alt=""
/>
{option.label} ({option.code}) +{option.phone}
</Box>
);
}}
renderInput={(params) => (
<TextField
{...params}
label="Choose a country"
slotProps={{
...params.slotProps,
htmlInput: {
...params.slotProps.htmlInput,
autoComplete: 'new-password', // disable autocomplete and autofill
},
}}
/>
)}
/>
);
}
interface CountryType {
code: string;
label: string;
phone: string;
suggested?: boolean;
}
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const countries: readonly CountryType[] = [
{ code: 'AD', label: 'Andorra', phone: '376' },
{
code: 'AE',
label: 'United Arab Emirates',
phone: '971',
},
{ code: 'AF', label: 'Afghanistan', phone: '93' },
{
code: 'AG',
label: 'Antigua and Barbuda',
phone: '1-268',
},
{ code: 'AI', label: 'Anguilla', phone: '1-264' },
{ code: 'AL', label: 'Albania', phone: '355' },
{ code: 'AM', label: 'Armenia', phone: '374' },
{ code: 'AO', label: 'Angola', phone: '244' },
{ code: 'AQ', label: 'Antarctica', phone: '672' },
{ code: 'AR', label: 'Argentina', phone: '54' },
{ code: 'AS', label: 'American Samoa', phone: '1-684' },
{ code: 'AT', label: 'Austria', phone: '43' },
{
code: 'AU',
label: 'Australia',
phone: '61',
suggested: true,
},
{ code: 'AW', label: 'Aruba', phone: '297' },
{ code: 'AX', label: 'Alland Islands', phone: '358' },
{ code: 'AZ', label: 'Azerbaijan', phone: '994' },
{
code: 'BA',
label: 'Bosnia and Herzegovina',
phone: '387',
},
{ code: 'BB', label: 'Barbados', phone: '1-246' },
{ code: 'BD', label: 'Bangladesh', phone: '880' },
{ code: 'BE', label: 'Belgium', phone: '32' },
{ code: 'BF', label: 'Burkina Faso', phone: '226' },
{ code: 'BG', label: 'Bulgaria', phone: '359' },
{ code: 'BH', label: 'Bahrain', phone: '973' },
{ code: 'BI', label: 'Burundi', phone: '257' },
{ code: 'BJ', label: 'Benin', phone: '229' },
{ code: 'BL', label: 'Saint Barthelemy', phone: '590' },
{ code: 'BM', label: 'Bermuda', phone: '1-441' },
{ code: 'BN', label: 'Brunei Darussalam', phone: '673' },
{ code: 'BO', label: 'Bolivia', phone: '591' },
{ code: 'BR', label: 'Brazil', phone: '55' },
{ code: 'BS', label: 'Bahamas', phone: '1-242' },
{ code: 'BT', label: 'Bhutan', phone: '975' },
{ code: 'BV', label: 'Bouvet Island', phone: '47' },
{ code: 'BW', label: 'Botswana', phone: '267' },
{ code: 'BY', label: 'Belarus', phone: '375' },
{ code: 'BZ', label: 'Belize', phone: '501' },
{
code: 'CA',
label: 'Canada',
phone: '1',
suggested: true,
},
{
code: 'CC',
label: 'Cocos (Keeling) Islands',
phone: '61',
},
{
code: 'CD',
label: 'Congo, Democratic Republic of the',
phone: '243',
},
{
code: 'CF',
label: 'Central African Republic',
phone: '236',
},
{
code: 'CG',
label: 'Congo, Republic of the',
phone: '242',
},
{ code: 'CH', label: 'Switzerland', phone: '41' },
{ code: 'CI', label: "Cote d'Ivoire", phone: '225' },
{ code: 'CK', label: 'Cook Islands', phone: '682' },
{ code: 'CL', label: 'Chile', phone: '56' },
{ code: 'CM', label: 'Cameroon', phone: '237' },
{ code: 'CN', label: 'China', phone: '86' },
{ code: 'CO', label: 'Colombia', phone: '57' },
{ code: 'CR', label: 'Costa Rica', phone: '506' },
{ code: 'CU', label: 'Cuba', phone: '53' },
{ code: 'CV', label: 'Cape Verde', phone: '238' },
{ code: 'CW', label: 'Curacao', phone: '599' },
{ code: 'CX', label: 'Christmas Island', phone: '61' },
{ code: 'CY', label: 'Cyprus', phone: '357' },
{ code: 'CZ', label: 'Czech Republic', phone: '420' },
{
code: 'DE',
label: 'Germany',
phone: '49',
suggested: true,
},
{ code: 'DJ', label: 'Djibouti', phone: '253' },
{ code: 'DK', label: 'Denmark', phone: '45' },
{ code: 'DM', label: 'Dominica', phone: '1-767' },
{
code: 'DO',
label: 'Dominican Republic',
phone: '1-809',
},
{ code: 'DZ', label: 'Algeria', phone: '213' },
{ code: 'EC', label: 'Ecuador', phone: '593' },
{ code: 'EE', label: 'Estonia', phone: '372' },
{ code: 'EG', label: 'Egypt', phone: '20' },
{ code: 'EH', label: 'Western Sahara', phone: '212' },
{ code: 'ER', label: 'Eritrea', phone: '291' },
{ code: 'ES', label: 'Spain', phone: '34' },
{ code: 'ET', label: 'Ethiopia', phone: '251' },
{ code: 'FI', label: 'Finland', phone: '358' },
{ code: 'FJ', label: 'Fiji', phone: '679' },
{
code: 'FK',
label: 'Falkland Islands (Malvinas)',
phone: '500',
},
{
code: 'FM',
label: 'Micronesia, Federated States of',
phone: '691',
},
{ code: 'FO', label: 'Faroe Islands', phone: '298' },
{
code: 'FR',
label: 'France',
phone: '33',
suggested: true,
},
{ code: 'GA', label: 'Gabon', phone: '241' },
{ code: 'GB', label: 'United Kingdom', phone: '44' },
{ code: 'GD', label: 'Grenada', phone: '1-473' },
{ code: 'GE', label: 'Georgia', phone: '995' },
{ code: 'GF', label: 'French Guiana', phone: '594' },
{ code: 'GG', label: 'Guernsey', phone: '44' },
{ code: 'GH', label: 'Ghana', phone: '233' },
{ code: 'GI', label: 'Gibraltar', phone: '350' },
{ code: 'GL', label: 'Greenland', phone: '299' },
{ code: 'GM', label: 'Gambia', phone: '220' },
{ code: 'GN', label: 'Guinea', phone: '224' },
{ code: 'GP', label: 'Guadeloupe', phone: '590' },
{ code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
{ code: 'GR', label: 'Greece', phone: '30' },
{
code: 'GS',
label: 'South Georgia and the South Sandwich Islands',
phone: '500',
},
{ code: 'GT', label: 'Guatemala', phone: '502' },
{ code: 'GU', label: 'Guam', phone: '1-671' },
{ code: 'GW', label: 'Guinea-Bissau', phone: '245' },
{ code: 'GY', label: 'Guyana', phone: '592' },
{ code: 'HK', label: 'Hong Kong', phone: '852' },
{
code: 'HM',
label: 'Heard Island and McDonald Islands',
phone: '672',
},
{ code: 'HN', label: 'Honduras', phone: '504' },
{ code: 'HR', label: 'Croatia', phone: '385' },
{ code: 'HT', label: 'Haiti', phone: '509' },
{ code: 'HU', label: 'Hungary', phone: '36' },
{ code: 'ID', label: 'Indonesia', phone: '62' },
{ code: 'IE', label: 'Ireland', phone: '353' },
{ code: 'IL', label: 'Israel', phone: '972' },
{ code: 'IM', label: 'Isle of Man', phone: '44' },
{ code: 'IN', label: 'India', phone: '91' },
{
code: 'IO',
label: 'British Indian Ocean Territory',
phone: '246',
},
{ code: 'IQ', label: 'Iraq', phone: '964' },
{
code: 'IR',
label: 'Iran, Islamic Republic of',
phone: '98',
},
{ code: 'IS', label: 'Iceland', phone: '354' },
{ code: 'IT', label: 'Italy', phone: '39' },
{ code: 'JE', label: 'Jersey', phone: '44' },
{ code: 'JM', label: 'Jamaica', phone: '1-876' },
{ code: 'JO', label: 'Jordan', phone: '962' },
{
code: 'JP',
label: 'Japan',
phone: '81',
suggested: true,
},
{ code: 'KE', label: 'Kenya', phone: '254' },
{ code: 'KG', label: 'Kyrgyzstan', phone: '996' },
{ code: 'KH', label: 'Cambodia', phone: '855' },
{ code: 'KI', label: 'Kiribati', phone: '686' },
{ code: 'KM', label: 'Comoros', phone: '269' },
{
code: 'KN',
label: 'Saint Kitts and Nevis',
phone: '1-869',
},
{
code: 'KP',
label: "Korea, Democratic People's Republic of",
phone: '850',
},
{ code: 'KR', label: 'Korea, Republic of', phone: '82' },
{ code: 'KW', label: 'Kuwait', phone: '965' },
{ code: 'KY', label: 'Cayman Islands', phone: '1-345' },
{ code: 'KZ', label: 'Kazakhstan', phone: '7' },
{
code: 'LA',
label: "Lao People's Democratic Republic",
phone: '856',
},
{ code: 'LB', label: 'Lebanon', phone: '961' },
{ code: 'LC', label: 'Saint Lucia', phone: '1-758' },
{ code: 'LI', label: 'Liechtenstein', phone: '423' },
{ code: 'LK', label: 'Sri Lanka', phone: '94' },
{ code: 'LR', label: 'Liberia', phone: '231' },
{ code: 'LS', label: 'Lesotho', phone: '266' },
{ code: 'LT', label: 'Lithuania', phone: '370' },
{ code: 'LU', label: 'Luxembourg', phone: '352' },
{ code: 'LV', label: 'Latvia', phone: '371' },
{ code: 'LY', label: 'Libya', phone: '218' },
{ code: 'MA', label: 'Morocco', phone: '212' },
{ code: 'MC', label: 'Monaco', phone: '377' },
{
code: 'MD',
label: 'Moldova, Republic of',
phone: '373',
},
{ code: 'ME', label: 'Montenegro', phone: '382' },
{
code: 'MF',
label: 'Saint Martin (French part)',
phone: '590',
},
{ code: 'MG', label: 'Madagascar', phone: '261' },
{ code: 'MH', label: 'Marshall Islands', phone: '692' },
{
code: 'MK',
label: 'Macedonia, the Former Yugoslav Republic of',
phone: '389',
},
{ code: 'ML', label: 'Mali', phone: '223' },
{ code: 'MM', label: 'Myanmar', phone: '95' },
{ code: 'MN', label: 'Mongolia', phone: '976' },
{ code: 'MO', label: 'Macao', phone: '853' },
{
code: 'MP',
label: 'Northern Mariana Islands',
phone: '1-670',
},
{ code: 'MQ', label: 'Martinique', phone: '596' },
{ code: 'MR', label: 'Mauritania', phone: '222' },
{ code: 'MS', label: 'Montserrat', phone: '1-664' },
{ code: 'MT', label: 'Malta', phone: '356' },
{ code: 'MU', label: 'Mauritius', phone: '230' },
{ code: 'MV', label: 'Maldives', phone: '960' },
{ code: 'MW', label: 'Malawi', phone: '265' },
{ code: 'MX', label: 'Mexico', phone: '52' },
{ code: 'MY', label: 'Malaysia', phone: '60' },
{ code: 'MZ', label: 'Mozambique', phone: '258' },
{ code: 'NA', label: 'Namibia', phone: '264' },
{ code: 'NC', label: 'New Caledonia', phone: '687' },
{ code: 'NE', label: 'Niger', phone: '227' },
{ code: 'NF', label: 'Norfolk Island', phone: '672' },
{ code: 'NG', label: 'Nigeria', phone: '234' },
{ code: 'NI', label: 'Nicaragua', phone: '505' },
{ code: 'NL', label: 'Netherlands', phone: '31' },
{ code: 'NO', label: 'Norway', phone: '47' },
{ code: 'NP', label: 'Nepal', phone: '977' },
{ code: 'NR', label: 'Nauru', phone: '674' },
{ code: 'NU', label: 'Niue', phone: '683' },
{ code: 'NZ', label: 'New Zealand', phone: '64' },
{ code: 'OM', label: 'Oman', phone: '968' },
{ code: 'PA', label: 'Panama', phone: '507' },
{ code: 'PE', label: 'Peru', phone: '51' },
{ code: 'PF', label: 'French Polynesia', phone: '689' },
{ code: 'PG', label: 'Papua New Guinea', phone: '675' },
{ code: 'PH', label: 'Philippines', phone: '63' },
{ code: 'PK', label: 'Pakistan', phone: '92' },
{ code: 'PL', label: 'Poland', phone: '48' },
{
code: 'PM',
label: 'Saint Pierre and Miquelon',
phone: '508',
},
{ code: 'PN', label: 'Pitcairn', phone: '870' },
{ code: 'PR', label: 'Puerto Rico', phone: '1' },
{
code: 'PS',
label: 'Palestine, State of',
phone: '970',
},
{ code: 'PT', label: 'Portugal', phone: '351' },
{ code: 'PW', label: 'Palau', phone: '680' },
{ code: 'PY', label: 'Paraguay', phone: '595' },
{ code: 'QA', label: 'Qatar', phone: '974' },
{ code: 'RE', label: 'Reunion', phone: '262' },
{ code: 'RO', label: 'Romania', phone: '40' },
{ code: 'RS', label: 'Serbia', phone: '381' },
{ code: 'RU', label: 'Russian Federation', phone: '7' },
{ code: 'RW', label: 'Rwanda', phone: '250' },
{ code: 'SA', label: 'Saudi Arabia', phone: '966' },
{ code: 'SB', label: 'Solomon Islands', phone: '677' },
{ code: 'SC', label: 'Seychelles', phone: '248' },
{ code: 'SD', label: 'Sudan', phone: '249' },
{ code: 'SE', label: 'Sweden', phone: '46' },
{ code: 'SG', label: 'Singapore', phone: '65' },
{ code: 'SH', label: 'Saint Helena', phone: '290' },
{ code: 'SI', label: 'Slovenia', phone: '386' },
{
code: 'SJ',
label: 'Svalbard and Jan Mayen',
phone: '47',
},
{ code: 'SK', label: 'Slovakia', phone: '421' },
{ code: 'SL', label: 'Sierra Leone', phone: '232' },
{ code: 'SM', label: 'San Marino', phone: '378' },
{ code: 'SN', label: 'Senegal', phone: '221' },
{ code: 'SO', label: 'Somalia', phone: '252' },
{ code: 'SR', label: 'Suriname', phone: '597' },
{ code: 'SS', label: 'South Sudan', phone: '211' },
{
code: 'ST',
label: 'Sao Tome and Principe',
phone: '239',
},
{ code: 'SV', label: 'El Salvador', phone: '503' },
{
code: 'SX',
label: 'Sint Maarten (Dutch part)',
phone: '1-721',
},
{
code: 'SY',
label: 'Syrian Arab Republic',
phone: '963',
},
{ code: 'SZ', label: 'Swaziland', phone: '268' },
{
code: 'TC',
label: 'Turks and Caicos Islands',
phone: '1-649',
},
{ code: 'TD', label: 'Chad', phone: '235' },
{
code: 'TF',
label: 'French Southern Territories',
phone: '262',
},
{ code: 'TG', label: 'Togo', phone: '228' },
{ code: 'TH', label: 'Thailand', phone: '66' },
{ code: 'TJ', label: 'Tajikistan', phone: '992' },
{ code: 'TK', label: 'Tokelau', phone: '690' },
{ code: 'TL', label: 'Timor-Leste', phone: '670' },
{ code: 'TM', label: 'Turkmenistan', phone: '993' },
{ code: 'TN', label: 'Tunisia', phone: '216' },
{ code: 'TO', label: 'Tonga', phone: '676' },
{ code: 'TR', label: 'Turkey', phone: '90' },
{
code: 'TT',
label: 'Trinidad and Tobago',
phone: '1-868',
},
{ code: 'TV', label: 'Tuvalu', phone: '688' },
{
code: 'TW',
label: 'Taiwan',
phone: '886',
},
{
code: 'TZ',
label: 'United Republic of Tanzania',
phone: '255',
},
{ code: 'UA', label: 'Ukraine', phone: '380' },
{ code: 'UG', label: 'Uganda', phone: '256' },
{
code: 'US',
label: 'United States',
phone: '1',
suggested: true,
},
{ code: 'UY', label: 'Uruguay', phone: '598' },
{ code: 'UZ', label: 'Uzbekistan', phone: '998' },
{
code: 'VA',
label: 'Holy See (Vatican City State)',
phone: '379',
},
{
code: 'VC',
label: 'Saint Vincent and the Grenadines',
phone: '1-784',
},
{ code: 'VE', label: 'Venezuela', phone: '58' },
{
code: 'VG',
label: 'British Virgin Islands',
phone: '1-284',
},
{
code: 'VI',
label: 'US Virgin Islands',
phone: '1-340',
},
{ code: 'VN', label: 'Vietnam', phone: '84' },
{ code: 'VU', label: 'Vanuatu', phone: '678' },
{ code: 'WF', label: 'Wallis and Futuna', phone: '681' },
{ code: 'WS', label: 'Samoa', phone: '685' },
{ code: 'XK', label: 'Kosovo', phone: '383' },
{ code: 'YE', label: 'Yemen', phone: '967' },
{ code: 'YT', label: 'Mayotte', phone: '262' },
{ code: 'ZA', label: 'South Africa', phone: '27' },
{ code: 'ZM', label: 'Zambia', phone: '260' },
{ code: 'ZW', label: 'Zimbabwe', phone: '263' },
];
제어 상태 (Controlled states)
컴포넌트에는 제어할 수 있는 두 가지 상태가 있어요:
value/onChangeprops 조합을 가진 "value" 상태예요. 이 상태는 사용자가 선택한 값을 나타내며, 예를 들어 Enter를 눌렀을 때의 값이에요.inputValue/onInputChangeprops 조합을 가진 "input value" 상태예요. 이 상태는 텍스트박스에 표시되는 값을 나타냅니다.
이 두 상태는 분리되어 있으며, 독립적으로 제어해야 해요.
:::info
- 컴포넌트가 controlled(제어) 라는 것은 부모가 props를 사용해 관리한다는 의미예요.
- 컴포넌트가 uncontrolled(비제어) 라는 것은 자신의 로컬 상태로 관리된다는 의미예요.
controlled와 uncontrolled 컴포넌트에 대해 더 자세히 알아보려면 React 문서를 참고하세요. :::
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export default function ControllableStates() {
const [value, setValue] = React.useState<string | null>(options[0]);
const [inputValue, setInputValue] = React.useState('');
return (
<div>
<div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
<div>{`inputValue: '${inputValue}'`}</div>
<br />
<Autocomplete
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
inputValue={inputValue}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
id="controllable-states-demo"
options={options}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Controllable" />}
/>
</div>
);
}
:::warning
value를 제어한다면, 렌더링 사이에 참조가 안정적(referentially stable)인지 확인하세요. 다시 말해, 값 자체가 바뀌지 않았다면 값의 참조도 바뀌지 않아야 해요:
// ⚠️ BAD
return <Autocomplete multiple value={allValues.filter((v) => v.selected)} />;
// 👍 GOOD
const selectedValues = React.useMemo(
() => allValues.filter((v) => v.selected),
[allValues],
);
return <Autocomplete multiple value={selectedValues} />;
첫 번째 예시에서 allValues.filter는 매 렌더링마다 호출되어 새 배열을 반환합니다. 해결 방법은 값을 메모이제이션(memoize)해서 값이 필요할 때만 변경되도록 하는 거예요.
:::
프리 솔로 (Free solo)
freeSolo를 true로 설정하면 텍스트박스가 임의의 값을 담을 수 있어요.
검색 입력 (Search input)
이 prop은 검색 입력(search input) 과 제안 기능의 기본 사용 사례를 다루도록 설계되었어요. 예를 들어 Google 검색이나 react-autowhatever 같은 경우죠.
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
import Autocomplete from '@mui/material/Autocomplete';
export default function FreeSolo() {
return (
<Stack spacing={2} sx={{ width: 300 }}>
<Autocomplete
id="free-solo-demo"
freeSolo
resetHighlightOnMouseLeave
options={top100Films.map((option) => option.title)}
renderInput={(params) => <TextField {...params} label="freeSolo" />}
/>
<Autocomplete
freeSolo
resetHighlightOnMouseLeave
id="free-solo-2-demo"
disableClearable
options={top100Films.map((option) => option.title)}
renderInput={(params) => (
<TextField
{...params}
label="Search input"
slotProps={{
...params.slotProps,
input: {
...params.slotProps.input,
type: 'search',
},
}}
/>
)}
/>
<Autocomplete
id="free-solo-demo3"
freeSolo
resetHighlightOnMouseLeave
options={top100Films}
renderInput={(params) => (
<TextField {...params} label="freeSolo (handle string values)" />
)}
getOptionLabel={(option) =>
typeof option === 'string' ? option : option.title
}
// this demo demonstrates how the value parameter can be either an object (same type as option) or a string
// it could become a string if, for example, you press "Enter" in the input field
isOptionEqualToValue={(option, value) => {
if (typeof value === 'string') {
return option.title === value;
}
return option.title === value.title;
}}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
:::warning 문자열이 아닌 옵션과 함께 free solo 모드를 사용할 때는 타입 불일치(type mismatch)가 발생할 수 있으니 주의하세요.
텍스트박스에 입력해 만든 값은 옵션의 타입과 관계없이 항상 문자열이에요. :::
생성 가능한 값 (Creatable)
이 모드를 콤보 박스 같은 경험(select 요소의 향상된 버전)에 사용하려면 다음을 설정하는 것을 권장해요:
selectOnFocus— 사용자가 선택된 값을 지우는 데 도움을 줘요.clearOnBlur— 사용자가 새 값을 입력하는 데 도움을 줘요.handleHomeEndKeys— Home과 End 키로 팝업 안으로 포커스를 이동해요.resetHighlightOnMouseLeave— 포인터가 팝업을 떠날 때 마우스로 만든 하이라이트를 지워요.- 마지막 옵션, 예를 들어
Add "YOUR SEARCH".
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
const filter = createFilterOptions<FilmOptionType>();
export default function FreeSoloCreateOption() {
const [value, setValue] = React.useState<FilmOptionType | null>(null);
return (
<Autocomplete
value={value}
onChange={(event, newValue) => {
if (typeof newValue === 'string') {
setValue({
title: newValue,
});
} else if (newValue && newValue.inputValue) {
// Create a new value from the user input
setValue({
title: newValue.inputValue,
});
} else {
setValue(newValue);
}
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
const { inputValue } = params;
// Suggest the creation of a new value
const isExisting = options.some((option) => inputValue === option.title);
if (inputValue !== '' && !isExisting) {
filtered.push({
inputValue,
title: `Add "${inputValue}"`,
});
}
return filtered;
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
id="free-solo-with-text-demo"
options={top100Films}
getOptionLabel={(option) => {
// Value selected with enter, right from the input
if (typeof option === 'string') {
return option;
}
// Add "xxx" option created dynamically
if (option.inputValue) {
return option.inputValue;
}
// Regular option
return option.title;
}}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
{option.title}
</li>
);
}}
sx={{ width: 300 }}
freeSolo
resetHighlightOnMouseLeave
renderInput={(params) => (
<TextField {...params} label="Free solo with text demo" />
)}
/>
);
}
interface FilmOptionType {
inputValue?: string;
title: string;
year?: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films: readonly FilmOptionType[] = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
사용자가 새 값을 추가하려 할 때 다이얼로그를 표시할 수도 있어요.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogActions from '@mui/material/DialogActions';
import Button from '@mui/material/Button';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
const filter = createFilterOptions<FilmOptionType>();
export default function FreeSoloCreateOptionDialog() {
const [value, setValue] = React.useState<FilmOptionType | null>(null);
const [open, toggleOpen] = React.useState(false);
const handleClose = () => {
setDialogValue({
title: '',
year: '',
});
toggleOpen(false);
};
const [dialogValue, setDialogValue] = React.useState({
title: '',
year: '',
});
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setValue({
title: dialogValue.title,
year: parseInt(dialogValue.year, 10),
});
handleClose();
};
return (
<React.Fragment>
<Autocomplete
value={value}
onChange={(event, newValue) => {
if (typeof newValue === 'string') {
// timeout to avoid instant validation of the dialog's form.
setTimeout(() => {
toggleOpen(true);
setDialogValue({
title: newValue,
year: '',
});
});
} else if (newValue && newValue.inputValue) {
toggleOpen(true);
setDialogValue({
title: newValue.inputValue,
year: '',
});
} else {
setValue(newValue);
}
}}
filterOptions={(options, params) => {
const filtered = filter(options, params);
if (params.inputValue !== '') {
filtered.push({
inputValue: params.inputValue,
title: `Add "${params.inputValue}"`,
});
}
return filtered;
}}
id="free-solo-dialog-demo"
options={top100Films}
getOptionLabel={(option) => {
// for example value selected with enter, right from the input
if (typeof option === 'string') {
return option;
}
if (option.inputValue) {
return option.inputValue;
}
return option.title;
}}
selectOnFocus
clearOnBlur
handleHomeEndKeys
renderOption={(props, option) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
{option.title}
</li>
);
}}
sx={{ width: 300 }}
freeSolo
resetHighlightOnMouseLeave
renderInput={(params) => <TextField {...params} label="Free solo dialog" />}
/>
<Dialog open={open} onClose={handleClose}>
<form onSubmit={handleSubmit}>
<DialogTitle>Add a new film</DialogTitle>
<DialogContent>
<DialogContentText>
Did you miss any film in our list? Please, add it!
</DialogContentText>
<TextField
autoFocus
margin="dense"
id="name"
value={dialogValue.title}
onChange={(event) =>
setDialogValue({
...dialogValue,
title: event.target.value,
})
}
label="title"
type="text"
variant="standard"
/>
<TextField
margin="dense"
id="name"
value={dialogValue.year}
onChange={(event) =>
setDialogValue({
...dialogValue,
year: event.target.value,
})
}
label="year"
type="number"
variant="standard"
/>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button type="submit">Add</Button>
</DialogActions>
</form>
</Dialog>
</React.Fragment>
);
}
interface FilmOptionType {
inputValue?: string;
title: string;
year?: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films: readonly FilmOptionType[] = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
그룹화 (Grouped)
groupBy prop으로 옵션을 그룹화할 수 있어요. 이렇게 하면 옵션들이 그룹화하는 동일한 차원으로 정렬되어 있는지 확인해야 해요. 그렇지 않으면 중복된 헤더가 나타나는 걸 볼 수 있답니다.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function Grouped() {
const options = top100Films.map((option) => {
const firstLetter = option.title[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<Autocomplete
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="With categories" />}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
그룹이 렌더링되는 방식을 제어하려면 커스텀 renderGroup prop을 제공하세요. 이 prop은 두 개의 필드를 가진 객체를 받는 함수예요:
group— 그룹 이름을 나타내는 문자열children— 그룹에 속한 목록 항목들의 모음
다음 데모는 이 prop을 사용해 커스텀 마크업을 정의하고 기본 그룹의 스타일을 오버라이드하는 방법을 보여줘요:
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import { styled, lighten, darken } from '@mui/system';
const GroupHeader = styled('div')(({ theme }) => ({
position: 'sticky',
top: '-8px',
padding: '4px 10px',
color: theme.palette.primary.main,
backgroundColor: lighten(theme.palette.primary.light, 0.85),
...theme.applyStyles('dark', {
backgroundColor: darken(theme.palette.primary.main, 0.8),
}),
}));
const GroupItems = styled('ul')({
padding: 0,
});
export default function RenderGroup() {
const options = top100Films.map((option) => {
const firstLetter = option.title[0].toUpperCase();
return {
firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter,
...option,
};
});
return (
<Autocomplete
options={options.sort((a, b) => -b.firstLetter.localeCompare(a.firstLetter))}
groupBy={(option) => option.firstLetter}
getOptionLabel={(option) => option.title}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="With categories" />}
renderGroup={(params) => (
<li key={params.key}>
<GroupHeader>{params.group}</GroupHeader>
<GroupItems>{params.children}</GroupItems>
</li>
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
비활성화된 옵션 (Disabled options)
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function DisabledOptions() {
return (
<Autocomplete
options={timeSlots}
getOptionDisabled={(option) =>
option === timeSlots[0] || option === timeSlots[2]
}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Disabled options" />}
/>
);
}
// One time slot every 30 minutes.
const timeSlots = Array.from(new Array(24 * 2)).map(
(_, index) =>
`${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${
index % 2 === 0 ? '00' : '30'
}`,
);
useAutocomplete
고급 커스터마이징 사용 사례를 위해, 헤드리스(headless) useAutocomplete() 훅이 노출되어 있어요. 이 훅은 Autocomplete 컴포넌트와 거의 같은 옵션을 받지만, JSX 렌더링과 관련된 모든 props는 제외돼요. Autocomplete 컴포넌트는 이 훅을 기반으로 만들어졌어요.
import useAutocomplete from '@mui/material/useAutocomplete';
import useAutocomplete from '@mui/material/useAutocomplete';
import { styled } from '@mui/system';
const Label = styled('label')({
display: 'block',
});
const Input = styled('input')(({ theme }) => ({
width: 200,
backgroundColor: '#fff',
color: '#000',
...theme.applyStyles('dark', {
backgroundColor: '#000',
color: '#fff',
}),
}));
const Listbox = styled('ul')(({ theme }) => ({
width: 200,
margin: 0,
padding: 0,
zIndex: 1,
position: 'absolute',
listStyle: 'none',
backgroundColor: '#fff',
overflow: 'auto',
maxHeight: 200,
border: '1px solid rgba(0,0,0,.25)',
'& li.Mui-focused': {
backgroundColor: '#4a8df6',
color: 'white',
cursor: 'pointer',
},
'& li:active': {
backgroundColor: '#2977f5',
color: 'white',
},
...theme.applyStyles('dark', {
backgroundColor: '#000',
}),
}));
export default function UseAutocomplete() {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getListboxProps,
getOptionProps,
groupedOptions,
} = useAutocomplete({
id: 'use-autocomplete-demo',
options: top100Films,
getOptionLabel: (option) => option.title,
});
return (
<div>
<div {...getRootProps()}>
<Label {...getInputLabelProps()}>useAutocomplete</Label>
<Input {...getInputProps()} />
</div>
{groupedOptions.length > 0 ? (
<Listbox {...getListboxProps()}>
{groupedOptions.map((option, index) => {
const { key, ...optionProps } = getOptionProps({ option, index });
return (
<li key={key} {...optionProps}>
{option.title}
</li>
);
})}
</Listbox>
) : null}
</div>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
커스터마이즈된 훅 (Customized hook)
import useAutocomplete, {
AutocompleteGetItemProps,
UseAutocompleteProps,
} from '@mui/material/useAutocomplete';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { styled } from '@mui/material/styles';
import { autocompleteClasses } from '@mui/material/Autocomplete';
const Root = styled('div')(({ theme }) => ({
color: 'rgba(0,0,0,0.85)',
fontSize: '14px',
...theme.applyStyles('dark', {
color: 'rgba(255,255,255,0.65)',
}),
}));
const Label = styled('label')`
padding: 0 0 4px;
line-height: 1.5;
display: block;
`;
const InputWrapper = styled('div')(({ theme }) => ({
width: '300px',
border: '1px solid #d9d9d9',
backgroundColor: '#fff',
borderRadius: '4px',
padding: '1px',
display: 'flex',
flexWrap: 'wrap',
...theme.applyStyles('dark', {
borderColor: '#434343',
backgroundColor: '#141414',
}),
'&:hover': {
borderColor: '#40a9ff',
...theme.applyStyles('dark', {
borderColor: '#177ddc',
}),
},
'&.focused': {
borderColor: '#40a9ff',
boxShadow: '0 0 0 2px rgb(24 144 255 / 0.2)',
...theme.applyStyles('dark', {
borderColor: '#177ddc',
}),
},
'& input': {
backgroundColor: '#fff',
color: 'rgba(0,0,0,.85)',
height: '30px',
boxSizing: 'border-box',
padding: '4px 6px',
width: '0',
minWidth: '30px',
flexGrow: 1,
border: 0,
margin: 0,
outline: 0,
...theme.applyStyles('dark', {
color: 'rgba(255,255,255,0.65)',
backgroundColor: '#141414',
}),
},
}));
interface ItemProps extends ReturnType<AutocompleteGetItemProps<true>> {
label: string;
}
function Item(props: ItemProps) {
const { label, onDelete, ...other } = props;
return (
<div {...other}>
<span>{label}</span>
<CloseIcon onClick={onDelete} />
</div>
);
}
const StyledItem = styled(Item)<ItemProps>(({ theme }) => ({
display: 'flex',
alignItems: 'center',
height: '24px',
margin: '2px',
lineHeight: '22px',
backgroundColor: '#fafafa',
border: `1px solid #e8e8e8`,
borderRadius: '2px',
boxSizing: 'content-box',
padding: '0 4px 0 10px',
outline: 0,
overflow: 'hidden',
...theme.applyStyles('dark', {
backgroundColor: 'rgba(255,255,255,0.08)',
borderColor: '#303030',
}),
'&:focus': {
borderColor: '#40a9ff',
backgroundColor: '#e6f7ff',
...theme.applyStyles('dark', {
backgroundColor: '#003b57',
borderColor: '#177ddc',
}),
},
'& span': {
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
'& svg': {
fontSize: '12px',
cursor: 'pointer',
padding: '4px',
},
}));
const Listbox = styled('ul')(({ theme }) => ({
width: '300px',
margin: '2px 0 0',
padding: 0,
position: 'absolute',
listStyle: 'none',
backgroundColor: '#fff',
overflow: 'auto',
maxHeight: '250px',
borderRadius: '4px',
boxShadow: '0 2px 8px rgb(0 0 0 / 0.15)',
zIndex: 1,
...theme.applyStyles('dark', {
backgroundColor: '#141414',
}),
'& li': {
padding: '5px 12px',
display: 'flex',
'& span': {
flexGrow: 1,
},
'& svg': {
color: 'transparent',
},
},
"& li[aria-selected='true']": {
backgroundColor: '#fafafa',
fontWeight: 600,
...theme.applyStyles('dark', {
backgroundColor: '#2b2b2b',
}),
'& svg': {
color: '#1890ff',
},
},
[`& li.${autocompleteClasses.focused}`]: {
backgroundColor: '#e6f7ff',
cursor: 'pointer',
...theme.applyStyles('dark', {
backgroundColor: '#003b57',
}),
'& svg': {
color: 'currentColor',
},
},
}));
function CustomAutocomplete<Value>(
props: UseAutocompleteProps<Value, true, false, false>,
) {
const {
getRootProps,
getInputLabelProps,
getInputProps,
getItemProps,
getListboxProps,
getOptionProps,
groupedOptions,
value,
focused,
setAnchorEl,
} = useAutocomplete({
multiple: true,
...props,
});
return (
<Root>
<div {...getRootProps()}>
<Label {...getInputLabelProps()}>Customized hook</Label>
<InputWrapper ref={setAnchorEl} className={focused ? 'focused' : ''}>
{value.map((option, index) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<StyledItem
key={key}
{...itemProps}
label={props.getOptionLabel!(option)}
/>
);
})}
<input {...getInputProps()} />
</InputWrapper>
</div>
{groupedOptions.length > 0 ? (
<Listbox {...getListboxProps()}>
{groupedOptions.map((option, index) => {
const { key, ...optionProps } = getOptionProps({ option, index });
return (
<li key={key} {...optionProps}>
<span>{props.getOptionLabel!(option)}</span>
<CheckIcon fontSize="small" />
</li>
);
})}
</Listbox>
) : null}
</Root>
);
}
export default function CustomizedHook() {
return (
<CustomAutocomplete<FilmOptionType>
id="customized-hook-demo"
defaultValue={[top100Films[1]]}
options={top100Films}
getOptionLabel={(option) => option.title}
/>
);
}
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
훅 대신 Autocomplete 컴포넌트를 사용한 예시는 커스터마이징 섹션으로 이동해서 확인해 보세요.
비동기 요청 (Asynchronous requests)
컴포넌트는 두 가지 다른 비동기 사용 사례를 지원해요:
- 열 때 로드 (Load on open): 옵션을 로드하기 위해 컴포넌트와 상호작용할 때까지 기다려요.
- 입력할 때 검색 (Search as you type): 키 입력마다 새 요청이 만들어져요.
열 때 로드 (Load on open)
네트워크 요청이 진행 중인 동안 진행 상태(progress state)를 표시해요.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
interface Film {
title: string;
year: number;
}
function sleep(duration: number): Promise<void> {
return new Promise<void>((resolve) => {
setTimeout(() => {
resolve();
}, duration);
});
}
export default function Asynchronous() {
const [open, setOpen] = React.useState(false);
const [options, setOptions] = React.useState<readonly Film[]>([]);
const [loading, setLoading] = React.useState(false);
const handleOpen = () => {
setOpen(true);
(async () => {
setLoading(true);
await sleep(1e3); // For demo purposes.
setLoading(false);
setOptions([...topFilms]);
})();
};
const handleClose = () => {
setOpen(false);
setOptions([]);
};
return (
<Autocomplete
sx={{ width: 300 }}
open={open}
onOpen={handleOpen}
onClose={handleClose}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
slotProps={{
...params.slotProps,
input: {
...params.slotProps.input,
endAdornment: (
<React.Fragment>
{loading ? <CircularProgress color="inherit" size={20} /> : null}
{params.slotProps.input.endAdornment}
</React.Fragment>
),
},
}}
/>
)}
/>
);
}
// Top films as rated by IMDb users. http://www.imdb.com/chart/top
const topFilms = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
입력할 때 검색 (Search as you type)
매 키 입력마다 새 옵션을 가져오고 서버에서 텍스트박스의 현재 값으로 필터링하는 로직이라면, 요청 스로틀링(throttling)을 고려해 보세요.
또한 filterOptions prop을 오버라이드해서 Autocomplete 컴포넌트의 내장 필터링을 비활성화해야 해요:
<Autocomplete filterOptions={(x) => x} />
Google Maps 장소 (Google Maps place)
Google Maps Places Autocomplete용 커스터마이즈된 UI예요. 이 데모를 위해서는 Google Maps JavaScript와 Google Places API를 로드해야 해요.
import * as React from 'react';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Paper, { PaperProps } from '@mui/material/Paper';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import parse from 'autosuggest-highlight/parse';
// For the sake of this demo, we have to use debounce to reduce Google Maps Places API quote use
// But prefer to use throttle in practice
// import throttle from 'lodash/throttle';
import { debounce } from '@mui/material/utils';
// This key was created specifically for the demo in mui.com.
// You need to create a new one for your application.
const GOOGLE_MAPS_API_KEY = 'AIzaSyC3aviU6KHXAjoSnxcw6qbOhjnFctbxPkE';
const useEnhancedEffect =
typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
function loadScript(src: string, position: HTMLElement) {
const script = document.createElement('script');
script.setAttribute('async', '');
script.src = src;
position.appendChild(script);
return script;
}
interface MainTextMatchedSubstrings {
offset: number;
length: number;
}
interface StructuredFormatting {
main_text: string;
main_text_matched_substrings: readonly MainTextMatchedSubstrings[];
secondary_text?: string;
}
interface PlaceType {
description: string;
structured_formatting: StructuredFormatting;
}
function CustomPaper(props: PaperProps) {
return (
<Paper {...props}>
{props.children}
{/* Legal requirement https://developers.google.com/maps/documentation/javascript/policies#logo */}
<Box
sx={(staticTheme) => ({
display: 'flex',
justifyContent: 'flex-end',
p: '5px 10px 6px 10px',
opacity: 0.9,
'& path': {
fill: '#5e5e5e',
},
...staticTheme.applyStyles('dark', {
opacity: 0.7,
'& path': {
fill: '#fff',
},
}),
})}
>
<svg
aria-label="Google Maps"
height="14"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 98 18"
width="77"
>
<path d="M7.08 13.96a6.9 6.9 0 01-4.99-2.05A6.7 6.7 0 010 6.98Q0 4.1 2.09 2.05A6.9 6.9 0 017.08 0a6.7 6.7 0 014.79 1.92l-1.35 1.35a4.8 4.8 0 00-3.44-1.36q-2.1 0-3.55 1.48a5 5 0 00-1.45 3.59q0 2.12 1.46 3.59a4.8 4.8 0 003.55 1.48 4.8 4.8 0 003.53-1.4q.84-.84 1.04-2.4H7.08v-1.9h6.42a6 6 0 01.1 1.19q0 2.8-1.65 4.46a6.4 6.4 0 01-4.87 1.96M22 12.68a4.4 4.4 0 01-3.2 1.29 4.4 4.4 0 01-3.2-1.29 4.3 4.3 0 01-1.31-3.21q0-1.92 1.31-3.21a4.4 4.4 0 013.2-1.29q1.9 0 3.2 1.29a4.3 4.3 0 011.31 3.21A4.3 4.3 0 0122 12.68m-4.99-1.26q.75.78 1.79.77 1.04 0 1.79-.77.75-.78.75-1.95 0-1.19-.74-1.96-.75-.77-1.8-.77t-1.8.77a2.7 2.7 0 00-.74 1.96q0 1.17.75 1.95m14.84 1.26q-1.3 1.29-3.2 1.29c-1.9 0-2.33-.43-3.2-1.29a4.3 4.3 0 01-1.31-3.21q0-1.92 1.31-3.21 1.3-1.29 3.2-1.29c1.9 0 2.33.43 3.2 1.29a4.3 4.3 0 011.31 3.21q0 1.92-1.31 3.21m-4.99-1.26q.75.78 1.79.77 1.04 0 1.79-.77.75-.78.75-1.95 0-1.19-.74-1.96c-.74-.77-1.09-.77-1.8-.77q-1.05 0-1.8.77a2.7 2.7 0 00-.74 1.96q0 1.17.75 1.95M38.32 18q-1.5 0-2.52-.8a4.5 4.5 0 01-1.46-1.86l1.72-.72q.27.65.85 1.12.59.48 1.41.48a2.3 2.3 0 001.76-.68q.64-.68.64-1.96v-.65h-.07a2.9 2.9 0 01-2.37 1.02 4 4 0 01-3.01-1.31 4.4 4.4 0 01-1.29-3.17 4.4 4.4 0 011.29-3.19 4 4 0 013.01-1.32q.76 0 1.39.29t.98.72h.07v-.72h1.87v8.07q0 2.35-1.2 3.52A4.2 4.2 0 0138.32 18m.13-5.81q1.02 0 1.71-.77a2.8 2.8 0 00.69-1.93q0-1.17-.69-1.96a2.2 2.2 0 00-1.71-.79q-1.03 0-1.77.78a2.8 2.8 0 00-.73 1.96q0 1.16.73 1.93.74.78 1.77.78M45.93.48v13.21h-1.98V.48zm5.41 13.48a4.38 4.38 0 01-4.46-4.49q0-1.98 1.23-3.24a4 4 0 013.01-1.26 3.8 3.8 0 012.68 1.07 5 5 0 011.17 1.8l.2.51-6.01 2.49a2.3 2.3 0 002.18 1.36q1.37 0 2.21-1.24l1.53 1.02q-.5.76-1.45 1.38-.92.6-2.29.6m-2.5-4.63l4.02-1.67a1.4 1.4 0 00-.63-.69 2 2 0 00-1.04-.26q-.87 0-1.63.72a2.4 2.4 0 00-.72 1.9m11.21 4.36V1.5h1.57l4.24 7.42h.07l4.24-7.42h1.57v12.19h-1.57V6.45l.07-2.04h-.07l-3.81 6.69h-.92l-3.81-6.69h-.07l.07 2.04v7.24zm16.31.27q-1.33 0-2.22-.77a2.5 2.5 0 01-.89-2.03q0-1.36 1.06-2.14 1.05-.77 2.61-.77 1.38 0 2.26.51v-.23q0-.91-.63-1.47A2.3 2.3 0 0077 6.51q-.68 0-1.23.32a1.6 1.6 0 00-.77.88l-1.43-.61q.28-.75 1.14-1.39a3.6 3.6 0 012.25-.64q1.6 0 2.66.94 1.05.93 1.06 2.64v5.04h-1.5v-1.16h-.08a3 3 0 01-2.74 1.43m.25-1.43q.97 0 1.76-.72.8-.72.79-1.71-.67-.54-1.99-.54-1.14 0-1.72.49-.58.5-.58 1.16 0 .61.53.97.54.35 1.21.35m9.97 1.43q-.96 0-1.71-.41a3 3 0 01-1.13-1.02h-.07l.07 1.16v3.68h-1.57V5.35h1.5v1.16h.07a3 3 0 011.13-1.02 3.67 3.67 0 014.5.87 4.5 4.5 0 011.18 3.17q0 1.9-1.18 3.17a3.7 3.7 0 01-2.79 1.26m-.26-1.43q1.1 0 1.87-.83.78-.82.78-2.19t-.78-2.19a2.5 2.5 0 00-1.87-.83q-1.11 0-1.88.82-.78.81-.77 2.2c.01 1.39.26 1.65.77 2.2q.78.82 1.88.82m8.39 1.43a3.8 3.8 0 01-3.65-2.38l1.4-.58q.67 1.57 2.26 1.57.73 0 1.2-.32a1 1 0 00.47-.85q0-.81-1.14-1.11l-1.69-.41a4 4 0 01-1.52-.77 1.9 1.9 0 01-.72-1.54q0-1.11.98-1.8a4 4 0 012.32-.69q1.11 0 1.98.5t1.24 1.44l-1.34.56q-.46-1.11-1.91-1.11-.7 0-1.18.29t-.48.78q0 .72 1.11.97l1.65.39a3 3 0 011.74.94q.56.66.56 1.5 0 1.12-.92 1.87-.9.75-2.36.75" />
</svg>
</Box>
</Paper>
);
}
const fetch = debounce(
async (
request: { input: string; sessionToken: any },
callback: (results?: readonly PlaceType[]) => void,
) => {
try {
const { suggestions } = await (
window as any
).google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(
request,
);
callback(
suggestions.map((suggestion: any) => {
const place = suggestion.placePrediction;
// Map to the old AutocompleteService.getPlacePredictions format
// https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete
return {
description: place.text.text,
structured_formatting: {
main_text: place.mainText.text,
main_text_matched_substrings: place.mainText.matches.map(
(match: any) => ({
offset: match.startOffset,
length: match.endOffset - match.startOffset,
}),
),
secondary_text: place.secondaryText?.text,
},
};
}),
);
} catch (err: any) {
if (err.message.startsWith('Quota exceeded for quota')) {
callback(request.input.length === 1 ? fakeAnswer.p : fakeAnswer.paris);
}
throw err;
}
},
400,
);
const emptyOptions = [] as any;
let sessionToken: any;
export default function GoogleMaps() {
const [value, setValue] = React.useState<PlaceType | null>(null);
const [inputValue, setInputValue] = React.useState('');
const [options, setOptions] = React.useState<readonly PlaceType[]>(emptyOptions);
const callbackId = React.useId().replace(/[^\w]/g, '');
const [loaded, setLoaded] = React.useState(false);
if (typeof window !== 'undefined') {
if (!document.querySelector('#google-maps')) {
const GOOGLE_NAMESPACE = '_google_callback';
const globalContext =
// @ts-ignore
window[GOOGLE_NAMESPACE] || (window[GOOGLE_NAMESPACE] = {});
globalContext[callbackId] = () => {
setLoaded(true);
};
const script = loadScript(
`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places&loading=async&callback=${GOOGLE_NAMESPACE}.${callbackId}`,
document.querySelector('head')!,
);
script.id = 'google-maps';
} else if ((window as any).google && !loaded) {
setLoaded(true);
}
}
useEnhancedEffect(() => {
if (!loaded) {
return undefined;
}
if (inputValue === '') {
setOptions(value ? [value] : emptyOptions);
return undefined;
}
// Allow to resolve the out of order request resolution.
let active = true;
if (!sessionToken) {
sessionToken = new (
window as any
).google.maps.places.AutocompleteSessionToken();
}
fetch({ input: inputValue, sessionToken }, (results?: readonly PlaceType[]) => {
if (!active) {
return;
}
let newOptions: readonly PlaceType[] = [];
if (results) {
newOptions = results;
if (value) {
newOptions = [
value,
...results.filter((result) => result.description !== value.description),
];
}
} else if (value) {
newOptions = [value];
}
setOptions(newOptions);
});
return () => {
active = false;
};
}, [value, inputValue, loaded]);
return (
<Autocomplete
sx={{ width: 300 }}
getOptionLabel={(option) =>
typeof option === 'string' ? option : option.description
}
filterOptions={(x) => x}
slots={{
paper: CustomPaper,
}}
options={options}
autoComplete
includeInputInList
filterSelectedOptions
resetHighlightOnMouseLeave
value={value}
noOptionsText="No locations"
onChange={(event: any, newValue: PlaceType | null) => {
setOptions(newValue ? [newValue, ...options] : options);
setValue(newValue);
}}
onInputChange={(event, newInputValue) => {
setInputValue(newInputValue);
}}
renderInput={(params) => (
<TextField {...params} label="Add a location" fullWidth />
)}
renderOption={(props, option) => {
const { key, ...optionProps } = props;
const matches = option.structured_formatting.main_text_matched_substrings;
const parts = parse(
option.structured_formatting.main_text,
matches.map((match: any) => [match.offset, match.offset + match.length]),
);
return (
<li key={key} {...optionProps}>
<Grid container sx={{ alignItems: 'center' }}>
<Grid sx={{ display: 'flex', width: 44 }}>
<LocationOnIcon sx={{ color: 'text.secondary' }} />
</Grid>
<Grid sx={{ width: 'calc(100% - 44px)', wordWrap: 'break-word' }}>
{parts.map((part, index) => (
<Box
key={index}
component="span"
sx={{
fontWeight: part.highlight
? 'fontWeightBold'
: 'fontWeightRegular',
}}
>
{part.text}
</Box>
))}
{option.structured_formatting.secondary_text ? (
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
{option.structured_formatting.secondary_text}
</Typography>
) : null}
</Grid>
</Grid>
</li>
);
}}
/>
);
}
// Fake data in case Google Maps Places API returns a rate limit.
const fakeAnswer = {
p: [
{
description: 'Portugal',
structured_formatting: {
main_text: 'Portugal',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Puerto Rico',
structured_formatting: {
main_text: 'Puerto Rico',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Pakistan',
structured_formatting: {
main_text: 'Pakistan',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Philippines',
structured_formatting: {
main_text: 'Philippines',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
},
},
{
description: 'Paris, France',
structured_formatting: {
main_text: 'Paris',
main_text_matched_substrings: [{ offset: 0, length: 1 }],
secondary_text: 'France',
},
},
],
paris: [
{
description: 'Paris, France',
structured_formatting: {
main_text: 'Paris',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: 'France',
},
},
{
description: 'Paris, TX, USA',
structured_formatting: {
main_text: 'Paris',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: 'TX, USA',
},
},
{
description: "Paris Beauvais Airport, Route de l'Aéroport, Tillé, France",
structured_formatting: {
main_text: 'Paris Beauvais Airport',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: "Route de l'Aéroport, Tillé, France",
},
},
{
description: 'Paris Las Vegas, South Las Vegas Boulevard, Las Vegas, NV, USA',
structured_formatting: {
main_text: 'Paris Las Vegas',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: 'South Las Vegas Boulevard, Las Vegas, NV, USA',
},
},
{
description: "Paris La Défense Arena, Jardin de l'Arche, Nanterre, France",
structured_formatting: {
main_text: 'Paris La Défense Arena',
main_text_matched_substrings: [{ offset: 0, length: 5 }],
secondary_text: "Jardin de l'Arche, Nanterre, France",
},
},
],
};
이 데모는 autosuggest-highlight — autosuggest와 autocomplete 컴포넌트에서 텍스트를 하이라이트하는 작은(1 kB) 유틸리티에 의존해요.
:::error Google Maps JavaScript API와 Places API를 사용하기 시작하려면 먼저 자신만의 API 키를 얻어야 해요.
이 데모는 API 요청에 제한된 할당량(quotas)이 있어요. 할당량을 초과하면 "Paris"에 대한 응답을 보게 됩니다. :::
무한 로딩 (Infinite loading)
이 데모는 @tanstack/react-query를 사용해 현재 목록의 끝에 도달하면 기존 options에 새 데이터를 추가(additively)로 가져와요. 목록은 @tanstack/react-virtual을 사용해 가상화(virtualized)됩니다.
import * as React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';
import TextField from '@mui/material/TextField';
import {
QueryClient,
QueryClientProvider,
useInfiniteQuery,
} from '@tanstack/react-query';
import { useEventCallback, useForkRef } from '@mui/material/utils';
import useTimeout from '@mui/utils/useTimeout';
import { useVirtualizer } from '@tanstack/react-virtual';
import type { Virtualizer } from '@tanstack/react-virtual';
import { fetchMovies, getMovieLabel, normalizeMovieQuery } from './server';
import type { Movie } from './movies';
const ITEM_HEIGHT_PX = 36;
const MAX_LISTBOX_HEIGHT_PX = 8 * ITEM_HEIGHT_PX;
const OVERSCAN = 5;
const PREFETCH_WITHIN_ITEMS = 5;
const INPUT_DEBOUNCE_MS = 200;
// Autocomplete invokes `renderOption(props, option)` for every option that
// would be rendered. Returning this tuple lets the virtual listbox own layout
// and mount only the rows that are visible.
type OptionTuple = readonly [
React.HTMLAttributes<HTMLLIElement> & { key: React.Key },
Movie,
];
type ListboxVirtualizer = Virtualizer<HTMLUListElement, Element>;
/** Props added to the Autocomplete listbox slot for infinite loading and virtualization. */
interface VirtualListboxProps extends React.HTMLAttributes<HTMLUListElement> {
/** Called when the rendered window gets close enough to the end to load another page. */
onReachEnd: () => void;
/** Changes when the search context changes so the listbox can reset to the first row. */
resetScrollKey: string;
/** Exposes the virtualizer to the parent so keyboard navigation can scroll highlighted rows into view. */
virtualizerRef: React.MutableRefObject<ListboxVirtualizer | null>;
}
/**
* Virtualized Autocomplete listbox.
* It mounts only visible options and triggers pagination as the rendered range approaches the end.
*/
const VirtualListbox = React.forwardRef<HTMLUListElement, VirtualListboxProps>(
function VirtualListbox(props, forwardedRef) {
const {
children,
onReachEnd,
resetScrollKey,
virtualizerRef,
style,
...listboxProps
} = props;
const items = children as OptionTuple[];
// One DOM node must serve both Autocomplete's listbox ref and the virtualizer's
// scroll observer, so merge the forwarded ref with the local ref.
const scrollContainerRef = React.useRef<HTMLUListElement | null>(null);
const setScrollContainerRef = useForkRef(scrollContainerRef, forwardedRef);
const virtualizer = useVirtualizer({
count: items.length,
getScrollElement: () => scrollContainerRef.current,
estimateSize: () => ITEM_HEIGHT_PX,
overscan: OVERSCAN,
// Avoids forcing synchronous updates while Autocomplete is rendering.
useFlushSync: false,
});
React.useEffect(() => {
virtualizerRef.current = virtualizer;
return () => {
if (virtualizerRef.current === virtualizer) {
virtualizerRef.current = null;
}
};
}, [virtualizer, virtualizerRef]);
React.useEffect(() => {
scrollContainerRef.current?.scrollTo({ top: 0 });
virtualizer.scrollToOffset(0);
}, [resetScrollKey, virtualizer]);
const virtualItems = virtualizer.getVirtualItems();
const lastRenderedIndex = virtualItems[virtualItems.length - 1]?.index ?? -1;
// Trigger pagination from the virtualizer's rendered range, not raw scroll
// offsets, so overscan and keyboard scrolling behave consistently.
React.useEffect(() => {
if (
items.length > 0 &&
lastRenderedIndex >= items.length - PREFETCH_WITHIN_ITEMS
) {
onReachEnd();
}
}, [lastRenderedIndex, items.length, onReachEnd]);
return (
<ul
ref={setScrollContainerRef}
{...listboxProps}
style={{
...style,
boxSizing: 'border-box',
maxHeight: MAX_LISTBOX_HEIGHT_PX,
overflow: 'auto',
paddingBlock: 0,
paddingInline: 0,
margin: 0,
position: 'relative',
listStyle: 'none',
}}
>
{/* This spacer gives the <ul> its scroll height without nesting a div inside the listbox. */}
<li
aria-hidden
role="presentation"
style={{
height: virtualizer.getTotalSize(),
pointerEvents: 'none',
}}
/>
{virtualItems.map((virtualItem) => {
const [optionProps, option] = items[virtualItem.index];
const { key, style: optionStyle, ...htmlProps } = optionProps;
const label = getMovieLabel(option);
return (
<li
key={key}
{...htmlProps}
style={{
...optionStyle,
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: virtualItem.size,
transform: `translateY(${virtualItem.start}px)`,
}}
>
<span
title={label}
style={{
display: 'block',
flexGrow: 1,
minWidth: 0,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}
>
{label}
</span>
</li>
);
})}
</ul>
);
},
);
function InfiniteQueryAutocomplete() {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState<Movie | null>(null);
const [inputValue, setInputValue] = React.useState('');
const [searchInputValue, setSearchInputValue] = React.useState('');
const [queryInputValue, setQueryInputValue] = React.useState('');
const virtualizerRef = React.useRef<ListboxVirtualizer | null>(null);
const wasOpenRef = React.useRef(false);
const queryDebounce = useTimeout();
React.useEffect(() => {
// Opening the popup should query for whatever text is already visible in the
// input, but reopening should not retrigger this sync while it is already open.
if (open && !wasOpenRef.current) {
setSearchInputValue(inputValue);
setQueryInputValue(inputValue);
}
wasOpenRef.current = open;
}, [inputValue, open]);
React.useEffect(() => {
if (!open || searchInputValue === queryInputValue) {
queryDebounce.clear();
return undefined;
}
queryDebounce.start(INPUT_DEBOUNCE_MS, () => {
setQueryInputValue(searchInputValue);
});
return queryDebounce.clear;
}, [open, queryDebounce, queryInputValue, searchInputValue]);
const normalizedQuery = React.useMemo(
() => normalizeMovieQuery(queryInputValue),
[queryInputValue],
);
const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } =
useInfiniteQuery({
queryKey: ['movies', normalizedQuery],
queryFn: ({ pageParam, signal }) =>
fetchMovies(normalizedQuery, pageParam, signal),
initialPageParam: 0,
getNextPageParam: (lastPage) => lastPage.nextPage,
enabled: open,
});
const options = React.useMemo(
() => data?.pages.flatMap((page) => page.items) ?? [],
[data],
);
const optionIndexMap = React.useMemo(() => {
const indexMap = new Map<number, number>();
options.forEach((option, index) => {
indexMap.set(option.id, index);
});
return indexMap;
}, [options]);
const handleReachEnd = useEventCallback(() => {
if (hasNextPage && !isFetchingNextPage) {
fetchNextPage();
}
});
const handleInputChange = useEventCallback(
(
_event: React.SyntheticEvent,
newInputValue: string,
reason: 'input' | 'reset' | 'clear' | 'blur' | 'selectOption' | 'removeOption',
) => {
setInputValue(newInputValue);
// Autocomplete also calls `onInputChange` for selection and blur resets.
// Only real typing should advance the remote query.
if (reason === 'input') {
setSearchInputValue(newInputValue);
}
if (reason === 'clear') {
setSearchInputValue(newInputValue);
setQueryInputValue(newInputValue);
}
},
);
const handleHighlightChange = useEventCallback(
(_event: React.SyntheticEvent, option: Movie | null) => {
const virtualizer = virtualizerRef.current;
if (!option || !virtualizer) {
return;
}
// Keep keyboard navigation aligned with virtualization. Autocomplete can
// highlight rows that are not mounted, so its default scrollIntoView would
// otherwise no-op for off-screen options.
const index = optionIndexMap.get(option.id);
if (index !== undefined) {
virtualizer.scrollToIndex(index, { align: 'auto' });
}
},
);
// The listbox scrolls back to the top when the popup opens or the search
// query changes, matching what users expect from a newly loaded result set.
const listboxResetKey = open ? normalizedQuery : `closed:${normalizedQuery}`;
return (
<Autocomplete<Movie>
sx={{ width: 320 }}
open={open}
onOpen={() => setOpen(true)}
onClose={() => setOpen(false)}
options={options}
value={value}
onChange={(_event, newValue) => setValue(newValue)}
inputValue={inputValue}
onInputChange={handleInputChange}
// Results are already filtered by the query key, so disable the built-in
// client filter.
filterOptions={(x) => x}
getOptionLabel={getMovieLabel}
isOptionEqualToValue={(option, candidate) => option.id === candidate.id}
loading={isFetching}
loadingText="Loading movies…"
disableListWrap
onHighlightChange={handleHighlightChange}
renderOption={(optionProps, option) =>
[optionProps, option] as unknown as React.ReactNode
}
renderInput={(params) => {
const { endAdornment, ...inputSlotProps } = params.slotProps.input;
return (
<TextField
{...params}
label="Movie"
slotProps={{
...params.slotProps,
input: {
...inputSlotProps,
endAdornment: (
<React.Fragment>
{isFetching ? (
<CircularProgress color="inherit" size={18} />
) : null}
{endAdornment}
</React.Fragment>
),
},
}}
/>
);
}}
slotProps={{
// The cast is only for the extra props injected into this custom slot.
listbox: {
component: VirtualListbox,
onReachEnd: handleReachEnd,
resetScrollKey: listboxResetKey,
virtualizerRef,
} as any,
}}
/>
);
}
const queryClientOptions = {
defaultOptions: {
queries: {
staleTime: 60_000,
refetchOnWindowFocus: false,
},
},
};
export default function InfiniteLoading() {
// Create the QueryClient once for this mounted demo. In an app, this usually
// lives near the root alongside the rest of your data-fetching setup.
const [queryClient] = React.useState(() => new QueryClient(queryClientOptions));
return (
<QueryClientProvider client={queryClient}>
<InfiniteQueryAutocomplete />
</QueryClientProvider>
);
}
단일 값 렌더링 (Single value rendering)
기본적으로 (multiple={false}일 때) 선택된 옵션은 입력 안에 일반 텍스트로 표시돼요. renderValue prop을 사용하면 선택된 값이 렌더링되는 방식을 커스터마이징할 수 있어요. 이는 커스텀 스타일을 추가하거나, 추가 정보를 표시하거나, 값을 다르게 포맷하는 데 유용할 수 있어요.
getItemPropsgetter는data-item-index,disabled,tabIndex같은 props를 제공해요. 올바른 접근성을 위해 이 props를 렌더링된 컴포넌트에 스프레드(spread)해야 해요.- Material UI Chip이 아닌 커스텀 컴포넌트를 사용한다면,
onDeleteprop은 Material UI Chip 전용이므로 구조 분해(destructure)하세요.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Chip from '@mui/material/Chip';
import Stack from '@mui/material/Stack';
export default function CustomSingleValueRendering() {
return (
<Stack spacing={3} sx={{ width: 500 }}>
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
renderValue={(value, getItemProps) => (
<Chip label={value.title} {...getItemProps()} />
)}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
<Autocomplete
options={top100Films.map((option) => option.title)}
freeSolo
renderValue={(value, getItemProps) => (
<Chip label={value} {...getItemProps()} />
)}
renderInput={(params) => <TextField {...params} label="freeSolo" />}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
여러 값 (Multiple values)
multiple={true}이면 사용자가 여러 값을 선택할 수 있어요. "items"라고 부르는 이 선택된 값들은 renderValue prop으로 커스터마이징할 수 있어요.
getItemPropsgetter는data-item-index,disabled,tabIndex같은 필수 props를 공급해요. 각 렌더링된 항목에 스프레드하는 것을 잊지 마세요.- Material UI Chip이 아닌 커스텀 컴포넌트를 사용한다면,
onDeleteprop은 Material UI Chip 전용이므로 구조 분해하세요.
import Chip from '@mui/material/Chip';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Stack from '@mui/material/Stack';
export default function Tags() {
return (
<Stack spacing={3} sx={{ width: 500 }}>
<Autocomplete
multiple
id="tags-standard"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Multiple values"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-outlined"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
filterSelectedOptions
renderInput={(params) => (
<TextField
{...params}
label="filterSelectedOptions"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-filled"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[13].title]}
freeSolo
renderValue={(value: readonly string[], getItemProps) =>
value.map((option: string, index: number) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<Chip variant="outlined" label={option} key={key} {...itemProps} />
);
})
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="freeSolo"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="tags-readOnly"
options={top100Films.map((option) => option.title)}
defaultValue={[top100Films[12].title, top100Films[13].title]}
readOnly
renderInput={(params) => (
<TextField {...params} label="readOnly" placeholder="Favorites" />
)}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
고정 옵션 (Fixed options)
특정 태그를 제거할 수 없도록 잠가야 하는 경우, chips를 비활성화(disabled)로 설정할 수 있어요.
import * as React from 'react';
import Chip from '@mui/material/Chip';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function FixedTags() {
const fixedOptions = [top100Films[6]];
const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]);
return (
<Autocomplete
multiple
id="fixed-tags-demo"
value={value}
onChange={(event, newValue) => {
setValue([
...fixedOptions,
...newValue.filter((option) => !fixedOptions.includes(option)),
]);
}}
options={top100Films}
getOptionLabel={(option) => option.title}
renderValue={(values, getItemProps) =>
values.map((option, index) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<Chip
key={key}
label={option.title}
{...itemProps}
disabled={fixedOptions.includes(option)}
/>
);
})
}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} label="Fixed tag" placeholder="Favorites" />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
선택 표시기 (Selection indicators)
이 예시는 목록박스에서 각 항목의 선택 상태를 나타내기 위해 아이콘이 어떻게 사용되는지 보여줘요.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
export default function CheckboxesTags() {
return (
<Autocomplete
multiple
id="checkboxes-tags-demo"
options={top100Films}
disableCloseOnSelect
getOptionLabel={(option) => option.title}
renderOption={(props, option, { selected }) => {
const { key, ...optionProps } = props;
const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon;
return (
<li key={key} {...optionProps}>
<SelectionIcon
fontSize="small"
style={{ marginRight: 8, padding: 9, boxSizing: 'content-box' }}
/>
{option.title}
</li>
);
}}
style={{ width: 500 }}
renderInput={(params) => (
<TextField {...params} label="Checkboxes" placeholder="Favorites" />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
];
태그 제한 (Limit tags)
limitTags prop을 사용해 포커스되지 않았을 때 표시되는 옵션의 수를 제한할 수 있어요.
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function LimitTags() {
return (
<Autocomplete
multiple
limitTags={2}
id="multiple-limit-tags"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13], top100Films[12], top100Films[11]]}
renderInput={(params) => (
<TextField {...params} label="limitTags" placeholder="Favorites" />
)}
sx={{ width: '500px' }}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
크기 (Sizes)
더 작은 입력이 마음에 드나요? size prop을 사용해 보세요.
import Stack from '@mui/material/Stack';
import Chip from '@mui/material/Chip';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
export default function Sizes() {
return (
<Stack spacing={2} sx={{ width: 500 }}>
<Autocomplete
id="size-small-standard"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={top100Films[13]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Size small"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="size-small-standard-multi"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField
{...params}
variant="standard"
label="Size small"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
id="size-small-outlined"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={top100Films[13]}
renderInput={(params) => (
<TextField {...params} label="Size small" placeholder="Favorites" />
)}
/>
<Autocomplete
multiple
id="size-small-outlined-multi"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderInput={(params) => (
<TextField {...params} label="Size small" placeholder="Favorites" />
)}
/>
<Autocomplete
id="size-small-filled"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={top100Films[13]}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="Size small"
placeholder="Favorites"
/>
)}
/>
<Autocomplete
multiple
id="size-small-filled-multi"
size="small"
options={top100Films}
getOptionLabel={(option) => option.title}
defaultValue={[top100Films[13]]}
renderValue={(values, getItemProps) =>
values.map((option, index) => {
const { key, ...itemProps } = getItemProps({ index });
return (
<Chip
key={key}
variant="outlined"
label={option.title}
size="small"
{...itemProps}
/>
);
})
}
renderInput={(params) => (
<TextField
{...params}
variant="filled"
label="Size small"
placeholder="Favorites"
/>
)}
/>
</Stack>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
커스터마이징 (Customization)
커스텀 입력 (Custom input)
renderInput prop을 사용하면 렌더링되는 입력을 커스터마이징할 수 있어요. 그 인자는 반드시 전달되어야 하는 props를 담고 있습니다. 특히 params.slotProps.input(그 ref 포함)과 params.slotProps.htmlInput에 주의하세요.
Autocomplete는 선택된 값을 params.slotProps.input.startAdornment를 통해 렌더링합니다. 커스텀 시작(adornment)을 추가할 때는 제공된 adornment를 보존하세요:
const getInputSlotProps = (params) => ({
...params.slotProps.input,
startAdornment: (
<>
{customStartAdornment}
{params.slotProps.input.startAdornment}
</>
),
});
<Autocomplete
options={options}
renderInput={(params) => (
<TextField
{...params}
slotProps={{
...params.slotProps,
input: getInputSlotProps(params),
}}
/>
)}
/>;
마찬가지로, params.slotProps.input.endAdornment를 커스터마이징할 때도 보존하세요. 그것은 Autocomplete의 내장 컨트롤을 담고 있거든요.
:::warning Autocomplete 안에서 커스텀 입력 컴포넌트를 사용한다면, ref를 기본 DOM 요소로 전달(forward)하는지 확인하세요. :::
import Autocomplete from '@mui/material/Autocomplete';
const options = ['Option 1', 'Option 2'];
export default function CustomInputAutocomplete() {
return (
<label>
Value:{' '}
<Autocomplete
sx={(theme) => ({
display: 'inline-block',
'& input': {
width: 200,
bgcolor: 'background.paper',
color: theme.palette.getContrastText(theme.palette.background.paper),
},
})}
id="custom-input-demo"
options={options}
renderInput={(params) => (
<div ref={params.slotProps.input.ref}>
<input type="text" {...params.slotProps.htmlInput} />
</div>
)}
/>
</label>
);
}
전역 커스터마이즈된 옵션 (Globally customized options)
앱의 모든 컴포넌트에 대해 Autocomplete 옵션을 전역적으로 커스터마이징하려면, 테마 기본 props를 사용하고 defaultProps 키에 renderOption 속성을 설정하면 돼요. renderOption 속성은 props와 내부 컴포넌트 상태를 포함하는 ownerState를 네 번째 매개변수로 받아요. 라벨을 표시하려면 ownerState에서 getOptionLabel prop을 사용할 수 있어요. 이 접근 방식으로 각 Autocomplete 컴포넌트마다 다른 옵션을 제공하면서도 옵션 스타일링은 일관되게 유지할 수 있어요.
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import { createTheme, useTheme, ThemeProvider, Theme } from '@mui/material/styles';
// Theme.ts
const customTheme = (outerTheme: Theme) =>
createTheme({
cssVariables: {
colorSchemeSelector: 'class',
},
palette: {
mode: outerTheme.palette.mode,
},
components: {
MuiAutocomplete: {
defaultProps: {
renderOption: (props, option, state, ownerState) => {
const { key, ...optionProps } = props;
return (
<Box
key={key}
sx={{
borderRadius: '8px',
margin: '5px',
[`&.${autocompleteClasses.option}`]: {
padding: '8px',
},
}}
component="li"
{...optionProps}
>
{ownerState.getOptionLabel(option)}
</Box>
);
},
},
},
},
});
export default function GloballyCustomizedOptions() {
// useTheme is used to determine the dark or light mode of the docs to maintain the Autocomplete component default styles.
const outerTheme = useTheme();
return (
<ThemeProvider theme={customTheme(outerTheme)}>
<Stack spacing={5} sx={{ width: 300 }}>
<MovieSelect />
<CountrySelect />
</Stack>
</ThemeProvider>
);
}
function MovieSelect() {
return (
<Autocomplete
options={top100Films}
getOptionLabel={(option: FilmOptionType) => `${option.title} (${option.year})`}
id="movie-customized-option-demo"
disableCloseOnSelect
renderInput={(params) => (
<TextField {...params} label="Choose a movie" variant="standard" />
)}
/>
);
}
function CountrySelect() {
return (
<Autocomplete
options={countries}
disableCloseOnSelect
getOptionLabel={(option: CountryType) =>
`${option.label} (${option.code}) +${option.phone}`
}
renderInput={(params) => <TextField {...params} label="Choose a country" />}
/>
);
}
interface CountryType {
code: string;
label: string;
phone: string;
suggested?: boolean;
}
// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js
const countries: readonly CountryType[] = [
{ code: 'AD', label: 'Andorra', phone: '376' },
{
code: 'AE',
label: 'United Arab Emirates',
phone: '971',
},
{ code: 'AF', label: 'Afghanistan', phone: '93' },
{
code: 'AG',
label: 'Antigua and Barbuda',
phone: '1-268',
},
{ code: 'AI', label: 'Anguilla', phone: '1-264' },
{ code: 'AL', label: 'Albania', phone: '355' },
{ code: 'AM', label: 'Armenia', phone: '374' },
{ code: 'AO', label: 'Angola', phone: '244' },
{ code: 'AQ', label: 'Antarctica', phone: '672' },
{ code: 'AR', label: 'Argentina', phone: '54' },
{ code: 'AS', label: 'American Samoa', phone: '1-684' },
{ code: 'AT', label: 'Austria', phone: '43' },
{
code: 'AU',
label: 'Australia',
phone: '61',
suggested: true,
},
{ code: 'AW', label: 'Aruba', phone: '297' },
{ code: 'AX', label: 'Alland Islands', phone: '358' },
{ code: 'AZ', label: 'Azerbaijan', phone: '994' },
{
code: 'BA',
label: 'Bosnia and Herzegovina',
phone: '387',
},
{ code: 'BB', label: 'Barbados', phone: '1-246' },
{ code: 'BD', label: 'Bangladesh', phone: '880' },
{ code: 'BE', label: 'Belgium', phone: '32' },
{ code: 'BF', label: 'Burkina Faso', phone: '226' },
{ code: 'BG', label: 'Bulgaria', phone: '359' },
{ code: 'BH', label: 'Bahrain', phone: '973' },
{ code: 'BI', label: 'Burundi', phone: '257' },
{ code: 'BJ', label: 'Benin', phone: '229' },
{ code: 'BL', label: 'Saint Barthelemy', phone: '590' },
{ code: 'BM', label: 'Bermuda', phone: '1-441' },
{ code: 'BN', label: 'Brunei Darussalam', phone: '673' },
{ code: 'BO', label: 'Bolivia', phone: '591' },
{ code: 'BR', label: 'Brazil', phone: '55' },
{ code: 'BS', label: 'Bahamas', phone: '1-242' },
{ code: 'BT', label: 'Bhutan', phone: '975' },
{ code: 'BV', label: 'Bouvet Island', phone: '47' },
{ code: 'BW', label: 'Botswana', phone: '267' },
{ code: 'BY', label: 'Belarus', phone: '375' },
{ code: 'BZ', label: 'Belize', phone: '501' },
{
code: 'CA',
label: 'Canada',
phone: '1',
suggested: true,
},
{
code: 'CC',
label: 'Cocos (Keeling) Islands',
phone: '61',
},
{
code: 'CD',
label: 'Congo, Democratic Republic of the',
phone: '243',
},
{
code: 'CF',
label: 'Central African Republic',
phone: '236',
},
{
code: 'CG',
label: 'Congo, Republic of the',
phone: '242',
},
{ code: 'CH', label: 'Switzerland', phone: '41' },
{ code: 'CI', label: "Cote d'Ivoire", phone: '225' },
{ code: 'CK', label: 'Cook Islands', phone: '682' },
{ code: 'CL', label: 'Chile', phone: '56' },
{ code: 'CM', label: 'Cameroon', phone: '237' },
{ code: 'CN', label: 'China', phone: '86' },
{ code: 'CO', label: 'Colombia', phone: '57' },
{ code: 'CR', label: 'Costa Rica', phone: '506' },
{ code: 'CU', label: 'Cuba', phone: '53' },
{ code: 'CV', label: 'Cape Verde', phone: '238' },
{ code: 'CW', label: 'Curacao', phone: '599' },
{ code: 'CX', label: 'Christmas Island', phone: '61' },
{ code: 'CY', label: 'Cyprus', phone: '357' },
{ code: 'CZ', label: 'Czech Republic', phone: '420' },
{
code: 'DE',
label: 'Germany',
phone: '49',
suggested: true,
},
{ code: 'DJ', label: 'Djibouti', phone: '253' },
{ code: 'DK', label: 'Denmark', phone: '45' },
{ code: 'DM', label: 'Dominica', phone: '1-767' },
{
code: 'DO',
label: 'Dominican Republic',
phone: '1-809',
},
{ code: 'DZ', label: 'Algeria', phone: '213' },
{ code: 'EC', label: 'Ecuador', phone: '593' },
{ code: 'EE', label: 'Estonia', phone: '372' },
{ code: 'EG', label: 'Egypt', phone: '20' },
{ code: 'EH', label: 'Western Sahara', phone: '212' },
{ code: 'ER', label: 'Eritrea', phone: '291' },
{ code: 'ES', label: 'Spain', phone: '34' },
{ code: 'ET', label: 'Ethiopia', phone: '251' },
{ code: 'FI', label: 'Finland', phone: '358' },
{ code: 'FJ', label: 'Fiji', phone: '679' },
{
code: 'FK',
label: 'Falkland Islands (Malvinas)',
phone: '500',
},
{
code: 'FM',
label: 'Micronesia, Federated States of',
phone: '691',
},
{ code: 'FO', label: 'Faroe Islands', phone: '298' },
{
code: 'FR',
label: 'France',
phone: '33',
suggested: true,
},
{ code: 'GA', label: 'Gabon', phone: '241' },
{ code: 'GB', label: 'United Kingdom', phone: '44' },
{ code: 'GD', label: 'Grenada', phone: '1-473' },
{ code: 'GE', label: 'Georgia', phone: '995' },
{ code: 'GF', label: 'French Guiana', phone: '594' },
{ code: 'GG', label: 'Guernsey', phone: '44' },
{ code: 'GH', label: 'Ghana', phone: '233' },
{ code: 'GI', label: 'Gibraltar', phone: '350' },
{ code: 'GL', label: 'Greenland', phone: '299' },
{ code: 'GM', label: 'Gambia', phone: '220' },
{ code: 'GN', label: 'Guinea', phone: '224' },
{ code: 'GP', label: 'Guadeloupe', phone: '590' },
{ code: 'GQ', label: 'Equatorial Guinea', phone: '240' },
{ code: 'GR', label: 'Greece', phone: '30' },
{
code: 'GS',
label: 'South Georgia and the South Sandwich Islands',
phone: '500',
},
{ code: 'GT', label: 'Guatemala', phone: '502' },
{ code: 'GU', label: 'Guam', phone: '1-671' },
{ code: 'GW', label: 'Guinea-Bissau', phone: '245' },
{ code: 'GY', label: 'Guyana', phone: '592' },
{ code: 'HK', label: 'Hong Kong', phone: '852' },
{
code: 'HM',
label: 'Heard Island and McDonald Islands',
phone: '672',
},
{ code: 'HN', label: 'Honduras', phone: '504' },
{ code: 'HR', label: 'Croatia', phone: '385' },
{ code: 'HT', label: 'Haiti', phone: '509' },
{ code: 'HU', label: 'Hungary', phone: '36' },
{ code: 'ID', label: 'Indonesia', phone: '62' },
{ code: 'IE', label: 'Ireland', phone: '353' },
{ code: 'IL', label: 'Israel', phone: '972' },
{ code: 'IM', label: 'Isle of Man', phone: '44' },
{ code: 'IN', label: 'India', phone: '91' },
{
code: 'IO',
label: 'British Indian Ocean Territory',
phone: '246',
},
{ code: 'IQ', label: 'Iraq', phone: '964' },
{
code: 'IR',
label: 'Iran, Islamic Republic of',
phone: '98',
},
{ code: 'IS', label: 'Iceland', phone: '354' },
{ code: 'IT', label: 'Italy', phone: '39' },
{ code: 'JE', label: 'Jersey', phone: '44' },
{ code: 'JM', label: 'Jamaica', phone: '1-876' },
{ code: 'JO', label: 'Jordan', phone: '962' },
{
code: 'JP',
label: 'Japan',
phone: '81',
suggested: true,
},
{ code: 'KE', label: 'Kenya', phone: '254' },
{ code: 'KG', label: 'Kyrgyzstan', phone: '996' },
{ code: 'KH', label: 'Cambodia', phone: '855' },
{ code: 'KI', label: 'Kiribati', phone: '686' },
{ code: 'KM', label: 'Comoros', phone: '269' },
{
code: 'KN',
label: 'Saint Kitts and Nevis',
phone: '1-869',
},
{
code: 'KP',
label: "Korea, Democratic People's Republic of",
phone: '850',
},
{ code: 'KR', label: 'Korea, Republic of', phone: '82' },
{ code: 'KW', label: 'Kuwait', phone: '965' },
{ code: 'KY', label: 'Cayman Islands', phone: '1-345' },
{ code: 'KZ', label: 'Kazakhstan', phone: '7' },
{
code: 'LA',
label: "Lao People's Democratic Republic",
phone: '856',
},
{ code: 'LB', label: 'Lebanon', phone: '961' },
{ code: 'LC', label: 'Saint Lucia', phone: '1-758' },
{ code: 'LI', label: 'Liechtenstein', phone: '423' },
{ code: 'LK', label: 'Sri Lanka', phone: '94' },
{ code: 'LR', label: 'Liberia', phone: '231' },
{ code: 'LS', label: 'Lesotho', phone: '266' },
{ code: 'LT', label: 'Lithuania', phone: '370' },
{ code: 'LU', label: 'Luxembourg', phone: '352' },
{ code: 'LV', label: 'Latvia', phone: '371' },
{ code: 'LY', label: 'Libya', phone: '218' },
{ code: 'MA', label: 'Morocco', phone: '212' },
{ code: 'MC', label: 'Monaco', phone: '377' },
{
code: 'MD',
label: 'Moldova, Republic of',
phone: '373',
},
{ code: 'ME', label: 'Montenegro', phone: '382' },
{
code: 'MF',
label: 'Saint Martin (French part)',
phone: '590',
},
{ code: 'MG', label: 'Madagascar', phone: '261' },
{ code: 'MH', label: 'Marshall Islands', phone: '692' },
{
code: 'MK',
label: 'Macedonia, the Former Yugoslav Republic of',
phone: '389',
},
{ code: 'ML', label: 'Mali', phone: '223' },
{ code: 'MM', label: 'Myanmar', phone: '95' },
{ code: 'MN', label: 'Mongolia', phone: '976' },
{ code: 'MO', label: 'Macao', phone: '853' },
{
code: 'MP',
label: 'Northern Mariana Islands',
phone: '1-670',
},
{ code: 'MQ', label: 'Martinique', phone: '596' },
{ code: 'MR', label: 'Mauritania', phone: '222' },
{ code: 'MS', label: 'Montserrat', phone: '1-664' },
{ code: 'MT', label: 'Malta', phone: '356' },
{ code: 'MU', label: 'Mauritius', phone: '230' },
{ code: 'MV', label: 'Maldives', phone: '960' },
{ code: 'MW', label: 'Malawi', phone: '265' },
{ code: 'MX', label: 'Mexico', phone: '52' },
{ code: 'MY', label: 'Malaysia', phone: '60' },
{ code: 'MZ', label: 'Mozambique', phone: '258' },
{ code: 'NA', label: 'Namibia', phone: '264' },
{ code: 'NC', label: 'New Caledonia', phone: '687' },
{ code: 'NE', label: 'Niger', phone: '227' },
{ code: 'NF', label: 'Norfolk Island', phone: '672' },
{ code: 'NG', label: 'Nigeria', phone: '234' },
{ code: 'NI', label: 'Nicaragua', phone: '505' },
{ code: 'NL', label: 'Netherlands', phone: '31' },
{ code: 'NO', label: 'Norway', phone: '47' },
{ code: 'NP', label: 'Nepal', phone: '977' },
{ code: 'NR', label: 'Nauru', phone: '674' },
{ code: 'NU', label: 'Niue', phone: '683' },
{ code: 'NZ', label: 'New Zealand', phone: '64' },
{ code: 'OM', label: 'Oman', phone: '968' },
{ code: 'PA', label: 'Panama', phone: '507' },
{ code: 'PE', label: 'Peru', phone: '51' },
{ code: 'PF', label: 'French Polynesia', phone: '689' },
{ code: 'PG', label: 'Papua New Guinea', phone: '675' },
{ code: 'PH', label: 'Philippines', phone: '63' },
{ code: 'PK', label: 'Pakistan', phone: '92' },
{ code: 'PL', label: 'Poland', phone: '48' },
{
code: 'PM',
label: 'Saint Pierre and Miquelon',
phone: '508',
},
{ code: 'PN', label: 'Pitcairn', phone: '870' },
{ code: 'PR', label: 'Puerto Rico', phone: '1' },
{
code: 'PS',
label: 'Palestine, State of',
phone: '970',
},
{ code: 'PT', label: 'Portugal', phone: '351' },
{ code: 'PW', label: 'Palau', phone: '680' },
{ code: 'PY', label: 'Paraguay', phone: '595' },
{ code: 'QA', label: 'Qatar', phone: '974' },
{ code: 'RE', label: 'Reunion', phone: '262' },
{ code: 'RO', label: 'Romania', phone: '40' },
{ code: 'RS', label: 'Serbia', phone: '381' },
{ code: 'RU', label: 'Russian Federation', phone: '7' },
{ code: 'RW', label: 'Rwanda', phone: '250' },
{ code: 'SA', label: 'Saudi Arabia', phone: '966' },
{ code: 'SB', label: 'Solomon Islands', phone: '677' },
{ code: 'SC', label: 'Seychelles', phone: '248' },
{ code: 'SD', label: 'Sudan', phone: '249' },
{ code: 'SE', label: 'Sweden', phone: '46' },
{ code: 'SG', label: 'Singapore', phone: '65' },
{ code: 'SH', label: 'Saint Helena', phone: '290' },
{ code: 'SI', label: 'Slovenia', phone: '386' },
{
code: 'SJ',
label: 'Svalbard and Jan Mayen',
phone: '47',
},
{ code: 'SK', label: 'Slovakia', phone: '421' },
{ code: 'SL', label: 'Sierra Leone', phone: '232' },
{ code: 'SM', label: 'San Marino', phone: '378' },
{ code: 'SN', label: 'Senegal', phone: '221' },
{ code: 'SO', label: 'Somalia', phone: '252' },
{ code: 'SR', label: 'Suriname', phone: '597' },
{ code: 'SS', label: 'South Sudan', phone: '211' },
{
code: 'ST',
label: 'Sao Tome and Principe',
phone: '239',
},
{ code: 'SV', label: 'El Salvador', phone: '503' },
{
code: 'SX',
label: 'Sint Maarten (Dutch part)',
phone: '1-721',
},
{
code: 'SY',
label: 'Syrian Arab Republic',
phone: '963',
},
{ code: 'SZ', label: 'Swaziland', phone: '268' },
{
code: 'TC',
label: 'Turks and Caicos Islands',
phone: '1-649',
},
{ code: 'TD', label: 'Chad', phone: '235' },
{
code: 'TF',
label: 'French Southern Territories',
phone: '262',
},
{ code: 'TG', label: 'Togo', phone: '228' },
{ code: 'TH', label: 'Thailand', phone: '66' },
{ code: 'TJ', label: 'Tajikistan', phone: '992' },
{ code: 'TK', label: 'Tokelau', phone: '690' },
{ code: 'TL', label: 'Timor-Leste', phone: '670' },
{ code: 'TM', label: 'Turkmenistan', phone: '993' },
{ code: 'TN', label: 'Tunisia', phone: '216' },
{ code: 'TO', label: 'Tonga', phone: '676' },
{ code: 'TR', label: 'Turkey', phone: '90' },
{
code: 'TT',
label: 'Trinidad and Tobago',
phone: '1-868',
},
{ code: 'TV', label: 'Tuvalu', phone: '688' },
{
code: 'TW',
label: 'Taiwan',
phone: '886',
},
{
code: 'TZ',
label: 'United Republic of Tanzania',
phone: '255',
},
{ code: 'UA', label: 'Ukraine', phone: '380' },
{ code: 'UG', label: 'Uganda', phone: '256' },
{
code: 'US',
label: 'United States',
phone: '1',
suggested: true,
},
{ code: 'UY', label: 'Uruguay', phone: '598' },
{ code: 'UZ', label: 'Uzbekistan', phone: '998' },
{
code: 'VA',
label: 'Holy See (Vatican City State)',
phone: '379',
},
{
code: 'VC',
label: 'Saint Vincent and the Grenadines',
phone: '1-784',
},
{ code: 'VE', label: 'Venezuela', phone: '58' },
{
code: 'VG',
label: 'British Virgin Islands',
phone: '1-284',
},
{
code: 'VI',
label: 'US Virgin Islands',
phone: '1-340',
},
{ code: 'VN', label: 'Vietnam', phone: '84' },
{ code: 'VU', label: 'Vanuatu', phone: '678' },
{ code: 'WF', label: 'Wallis and Futuna', phone: '681' },
{ code: 'WS', label: 'Samoa', phone: '685' },
{ code: 'XK', label: 'Kosovo', phone: '383' },
{ code: 'YE', label: 'Yemen', phone: '967' },
{ code: 'YT', label: 'Mayotte', phone: '262' },
{ code: 'ZA', label: 'South Africa', phone: '27' },
{ code: 'ZM', label: 'Zambia', phone: '260' },
{ code: 'ZW', label: 'Zimbabwe', phone: '263' },
];
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
GitHub의 피커 (GitHub's picker)
이 데모는 GitHub의 라벨 피커(label picker)를 재현해요:
import * as React from 'react';
import { useTheme, styled } from '@mui/material/styles';
import Popper from '@mui/material/Popper';
import ClickAwayListener from '@mui/material/ClickAwayListener';
import SettingsIcon from '@mui/icons-material/Settings';
import CloseIcon from '@mui/icons-material/Close';
import DoneIcon from '@mui/icons-material/Done';
import Autocomplete, {
AutocompleteCloseReason,
autocompleteClasses,
} from '@mui/material/Autocomplete';
import ButtonBase from '@mui/material/ButtonBase';
import InputBase from '@mui/material/InputBase';
import Box from '@mui/material/Box';
interface PopperComponentProps {
anchorEl?: any;
disablePortal?: boolean;
open: boolean;
}
const StyledAutocompletePopper = styled('div')(({ theme }) => ({
[`& .${autocompleteClasses.paper}`]: {
boxShadow: 'none',
margin: 0,
color: 'inherit',
fontSize: 13,
},
[`& .${autocompleteClasses.listbox}`]: {
padding: 0,
backgroundColor: '#fff',
...theme.applyStyles('dark', {
backgroundColor: '#1c2128',
}),
[`& .${autocompleteClasses.option}`]: {
minHeight: 'auto',
alignItems: 'flex-start',
padding: 8,
borderBottom: '1px solid #eaecef',
...theme.applyStyles('dark', {
borderBottom: '1px solid #30363d',
}),
'&[aria-selected="true"]': {
backgroundColor: 'transparent',
},
[`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
{
backgroundColor: (theme.vars || theme).palette.action.hover,
},
},
},
[`&.${autocompleteClasses.popperDisablePortal}`]: {
position: 'relative',
},
}));
function PopperComponent(props: PopperComponentProps) {
const { disablePortal, anchorEl, open, ...other } = props;
return <StyledAutocompletePopper {...other} />;
}
const StyledPopper = styled(Popper)(({ theme }) => ({
border: '1px solid #e1e4e8',
boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`,
color: '#24292e',
backgroundColor: '#fff',
borderRadius: 6,
width: 300,
zIndex: theme.zIndex.modal,
fontSize: 13,
...theme.applyStyles('dark', {
border: '1px solid #30363d',
boxShadow: '0 8px 24px rgb(1, 4, 9)',
color: '#c9d1d9',
backgroundColor: '#1c2128',
}),
}));
const StyledInput = styled(InputBase)(({ theme }) => ({
padding: 10,
width: '100%',
borderBottom: '1px solid #eaecef',
...theme.applyStyles('dark', {
borderBottom: '1px solid #30363d',
}),
'& input': {
borderRadius: 4,
padding: 8,
transition: theme.transitions.create(['border-color', 'box-shadow']),
fontSize: 14,
backgroundColor: '#fff',
border: '1px solid #30363d',
...theme.applyStyles('dark', {
backgroundColor: '#0d1117',
border: '1px solid #eaecef',
}),
'&:focus': {
boxShadow: '0px 0px 0px 3px rgba(3, 102, 214, 0.3)',
borderColor: '#0366d6',
...theme.applyStyles('dark', {
boxShadow: '0px 0px 0px 3px rgb(12, 45, 107)',
borderColor: '#388bfd',
}),
},
},
}));
const Button = styled(ButtonBase)(({ theme }) => ({
fontSize: 13,
width: '100%',
textAlign: 'left',
paddingBottom: 8,
fontWeight: 600,
color: '#586069',
...theme.applyStyles('dark', {
color: '#8b949e',
}),
'&:hover,&:focus': {
color: '#0366d6',
...theme.applyStyles('dark', {
color: '#58a6ff',
}),
},
'& span': {
width: '100%',
},
'& svg': {
width: 16,
height: 16,
},
}));
export default function GitHubLabel() {
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const [value, setValue] = React.useState<LabelType[]>([labels[1], labels[11]]);
const [pendingValue, setPendingValue] = React.useState<LabelType[]>([]);
const theme = useTheme();
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
setPendingValue(value);
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setValue(pendingValue);
if (anchorEl) {
anchorEl.focus();
}
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? 'github-label' : undefined;
return (
<React.Fragment>
<Box sx={{ width: 221, fontSize: 13 }}>
<Button disableRipple aria-describedby={id} onClick={handleClick}>
<span>Labels</span>
<SettingsIcon />
</Button>
{value.map((label) => (
<Box
key={label.name}
sx={{
mt: '3px',
height: 20,
padding: '.15em 4px',
fontWeight: 600,
lineHeight: '15px',
borderRadius: '2px',
}}
style={{
backgroundColor: label.color,
color: theme.palette.getContrastText(label.color),
}}
>
{label.name}
</Box>
))}
</Box>
<StyledPopper id={id} open={open} anchorEl={anchorEl} placement="bottom-start">
<ClickAwayListener onClickAway={handleClose}>
<div>
<Box
sx={(t) => ({
borderBottom: '1px solid #30363d',
padding: '8px 10px',
fontWeight: 600,
...t.applyStyles('light', {
borderBottom: '1px solid #eaecef',
}),
})}
>
Apply labels to this pull request
</Box>
<Autocomplete
open
multiple
onClose={(
event: React.ChangeEvent<{}>,
reason: AutocompleteCloseReason,
) => {
if (reason === 'escape') {
handleClose();
}
}}
value={pendingValue}
onChange={(event, newValue, reason) => {
if (
event.type === 'keydown' &&
((event as React.KeyboardEvent).key === 'Backspace' ||
(event as React.KeyboardEvent).key === 'Delete') &&
reason === 'removeOption'
) {
return;
}
setPendingValue(newValue);
}}
disableCloseOnSelect
renderValue={() => null}
noOptionsText="No labels"
renderOption={(props, option, { selected }) => {
const { key, ...optionProps } = props;
return (
<li key={key} {...optionProps}>
<Box
component={DoneIcon}
sx={{ width: 17, height: 17, mr: '5px', ml: '-2px' }}
style={{
visibility: selected ? 'visible' : 'hidden',
}}
/>
<Box
component="span"
sx={{
width: 14,
height: 14,
flexShrink: 0,
borderRadius: '3px',
mr: 1,
mt: '2px',
}}
style={{ backgroundColor: option.color }}
/>
<Box
sx={(t) => ({
flexGrow: 1,
'& span': {
color: '#8b949e',
...t.applyStyles('light', {
color: '#586069',
}),
},
})}
>
{option.name}
<br />
<span>{option.description}</span>
</Box>
<Box
component={CloseIcon}
sx={{ opacity: 0.6, width: 18, height: 18 }}
style={{
visibility: selected ? 'visible' : 'hidden',
}}
/>
</li>
);
}}
options={[...labels].sort((a, b) => {
// Display the selected labels first.
let ai = value.indexOf(a);
ai = ai === -1 ? value.length + labels.indexOf(a) : ai;
let bi = value.indexOf(b);
bi = bi === -1 ? value.length + labels.indexOf(b) : bi;
return ai - bi;
})}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<StyledInput
ref={params.slotProps.input.ref}
inputProps={params.slotProps.htmlInput}
autoFocus
placeholder="Filter labels"
/>
)}
slots={{
popper: PopperComponent,
}}
/>
</div>
</ClickAwayListener>
</StyledPopper>
</React.Fragment>
);
}
interface LabelType {
name: string;
color: string;
description?: string;
}
// From https://github.com/abdonrd/github-labels
const labels = [
{
name: 'good first issue',
color: '#7057ff',
description: 'Good for newcomers',
},
{
name: 'help wanted',
color: '#008672',
description: 'Extra attention is needed',
},
{
name: 'priority: critical',
color: '#b60205',
description: '',
},
{
name: 'priority: high',
color: '#d93f0b',
description: '',
},
{
name: 'priority: low',
color: '#0e8a16',
description: '',
},
{
name: 'priority: medium',
color: '#fbca04',
description: '',
},
{
name: "status: can't reproduce",
color: '#fec1c1',
description: '',
},
{
name: 'status: confirmed',
color: '#215cea',
description: '',
},
{
name: 'status: duplicate',
color: '#cfd3d7',
description: 'This issue or pull request already exists',
},
{
name: 'status: needs information',
color: '#fef2c0',
description: '',
},
{
name: 'status: wont do/fix',
color: '#eeeeee',
description: 'This will not be worked on',
},
{
name: 'type: bug',
color: '#d73a4a',
description: "Something isn't working",
},
{
name: 'type: discussion',
color: '#d4c5f9',
description: '',
},
{
name: 'type: documentation',
color: '#006b75',
description: '',
},
{
name: 'type: enhancement',
color: '#84b6eb',
description: '',
},
{
name: 'type: epic',
color: '#3e4b9e',
description: 'A theme of work that contain sub-tasks',
},
{
name: 'type: feature request',
color: '#fbca04',
description: 'New feature or request',
},
{
name: 'type: question',
color: '#d876e3',
description: 'Further information is requested',
},
];
컴포넌트 대신 useAutocomplete 훅을 사용한 커스터마이징 예시는 커스터마이즈된 훅 섹션으로 이동해서 확인해 보세요.
힌트 (Hint)
다음 데모는 Autocomplete에 힌트(hint) 기능을 추가하는 방법을 보여줘요:
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
export default function AutocompleteHint() {
const hint = React.useRef('');
const [inputValue, setInputValue] = React.useState('');
return (
<Autocomplete
onKeyDown={(event) => {
if (event.key === 'Tab') {
if (hint.current) {
setInputValue(hint.current);
event.preventDefault();
}
}
}}
onClose={() => {
hint.current = '';
}}
onChange={(event, newValue) => {
setInputValue(newValue && newValue.label ? newValue.label : '');
}}
disablePortal
resetHighlightOnMouseLeave
inputValue={inputValue}
id="combo-box-hint-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => {
return (
<Box sx={{ position: 'relative' }}>
<Typography
sx={{
position: 'absolute',
opacity: 0.5,
left: 14,
top: 16,
overflow: 'hidden',
whiteSpace: 'nowrap',
width: 'calc(100% - 75px)', // Adjust based on padding of TextField
}}
>
{hint.current}
</Typography>
<TextField
{...params}
onChange={(event) => {
const newValue = event.target.value;
setInputValue(newValue);
const matchingOption = top100Films.find((option) =>
option.label.startsWith(newValue),
);
if (newValue && matchingOption) {
hint.current = matchingOption.label;
} else {
hint.current = '';
}
}}
label="Movie"
/>
</Box>
);
}}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
{ label: 'The Godfather: Part II', year: 1974 },
{ label: 'The Dark Knight', year: 2008 },
{ label: '12 Angry Men', year: 1957 },
{ label: "Schindler's List", year: 1993 },
{ label: 'Pulp Fiction', year: 1994 },
{
label: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ label: 'The Good, the Bad and the Ugly', year: 1966 },
{ label: 'Fight Club', year: 1999 },
{
label: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
label: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ label: 'Forrest Gump', year: 1994 },
{ label: 'Inception', year: 2010 },
{
label: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ label: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ label: 'Goodfellas', year: 1990 },
{ label: 'The Matrix', year: 1999 },
{ label: 'Seven Samurai', year: 1954 },
{
label: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ label: 'City of God', year: 2002 },
{ label: 'Se7en', year: 1995 },
{ label: 'The Silence of the Lambs', year: 1991 },
{ label: "It's a Wonderful Life", year: 1946 },
{ label: 'Life Is Beautiful', year: 1997 },
{ label: 'The Usual Suspects', year: 1995 },
{ label: 'Léon: The Professional', year: 1994 },
{ label: 'Spirited Away', year: 2001 },
{ label: 'Saving Private Ryan', year: 1998 },
{ label: 'Once Upon a Time in the West', year: 1968 },
{ label: 'American History X', year: 1998 },
{ label: 'Interstellar', year: 2014 },
{ label: 'Casablanca', year: 1942 },
{ label: 'City Lights', year: 1931 },
{ label: 'Psycho', year: 1960 },
{ label: 'The Green Mile', year: 1999 },
{ label: 'The Intouchables', year: 2011 },
{ label: 'Modern Times', year: 1936 },
{ label: 'Raiders of the Lost Ark', year: 1981 },
{ label: 'Rear Window', year: 1954 },
{ label: 'The Pianist', year: 2002 },
{ label: 'The Departed', year: 2006 },
{ label: 'Terminator 2: Judgment Day', year: 1991 },
{ label: 'Back to the Future', year: 1985 },
{ label: 'Whiplash', year: 2014 },
{ label: 'Gladiator', year: 2000 },
{ label: 'Memento', year: 2000 },
{ label: 'The Prestige', year: 2006 },
{ label: 'The Lion King', year: 1994 },
{ label: 'Apocalypse Now', year: 1979 },
{ label: 'Alien', year: 1979 },
{ label: 'Sunset Boulevard', year: 1950 },
{
label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ label: 'The Great Dictator', year: 1940 },
{ label: 'Cinema Paradiso', year: 1988 },
{ label: 'The Lives of Others', year: 2006 },
{ label: 'Grave of the Fireflies', year: 1988 },
{ label: 'Paths of Glory', year: 1957 },
{ label: 'Django Unchained', year: 2012 },
{ label: 'The Shining', year: 1980 },
{ label: 'WALL·E', year: 2008 },
{ label: 'American Beauty', year: 1999 },
{ label: 'The Dark Knight Rises', year: 2012 },
{ label: 'Princess Mononoke', year: 1997 },
{ label: 'Aliens', year: 1986 },
{ label: 'Oldboy', year: 2003 },
{ label: 'Once Upon a Time in America', year: 1984 },
{ label: 'Witness for the Prosecution', year: 1957 },
{ label: 'Das Boot', year: 1981 },
{ label: 'Citizen Kane', year: 1941 },
{ label: 'North by Northwest', year: 1959 },
{ label: 'Vertigo', year: 1958 },
{
label: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ label: 'Reservoir Dogs', year: 1992 },
{ label: 'Braveheart', year: 1995 },
{ label: 'M', year: 1931 },
{ label: 'Requiem for a Dream', year: 2000 },
{ label: 'Amélie', year: 2001 },
{ label: 'A Clockwork Orange', year: 1971 },
{ label: 'Like Stars on Earth', year: 2007 },
{ label: 'Taxi Driver', year: 1976 },
{ label: 'Lawrence of Arabia', year: 1962 },
{ label: 'Double Indemnity', year: 1944 },
{
label: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ label: 'Amadeus', year: 1984 },
{ label: 'To Kill a Mockingbird', year: 1962 },
{ label: 'Toy Story 3', year: 2010 },
{ label: 'Logan', year: 2017 },
{ label: 'Full Metal Jacket', year: 1987 },
{ label: 'Dangal', year: 2016 },
{ label: 'The Sting', year: 1973 },
{ label: '2001: A Space Odyssey', year: 1968 },
{ label: "Singin' in the Rain", year: 1952 },
{ label: 'Toy Story', year: 1995 },
{ label: 'Bicycle Thieves', year: 1948 },
{ label: 'The Kid', year: 1921 },
{ label: 'Inglourious Basterds', year: 2009 },
{ label: 'Snatch', year: 2000 },
{ label: '3 Idiots', year: 2009 },
{ label: 'Monty Python and the Holy Grail', year: 1975 },
];
하이라이트 (Highlights)
다음 데모는 autosuggest-highlight — autosuggest와 autocomplete 컴포넌트에서 텍스트를 하이라이트하는 작은(1 kB) 유틸리티에 의존해요.
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import parse from 'autosuggest-highlight/parse';
import match from 'autosuggest-highlight/match';
export default function Highlights() {
return (
<Autocomplete
sx={{ width: 300 }}
options={top100Films}
getOptionLabel={(option) => option.title}
renderInput={(params) => (
<TextField {...params} label="Highlights" margin="normal" />
)}
renderOption={(props, option, { inputValue }) => {
const { key, ...optionProps } = props;
const matches = match(option.title, inputValue, { insideWords: true });
const parts = parse(option.title, matches);
return (
<li key={key} {...optionProps}>
<div>
{parts.map((part, index) => (
<span
key={index}
style={{
fontWeight: part.highlight ? 700 : 400,
}}
>
{part.text}
</span>
))}
</div>
</li>
);
}}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
커스텀 필터 (Custom filter)
컴포넌트는 filterOptions prop에 제공할 수 있는 필터 메서드를 만드는 팩토리(factory)를 노출해요. 기본 옵션 필터 동작을 변경하는 데 사용할 수 있어요.
import { createFilterOptions } from '@mui/material/Autocomplete';
createFilterOptions(config) => filterOptions
인자 (Arguments)
config(object [선택]):
config.ignoreAccents(bool [선택]): 기본값true. 발음 구별 부호(diacritics)를 제거해요.config.ignoreCase(bool [선택]): 기본값true. 모든 것을 소문자로 바꿔요.config.limit(number [선택]): 기본값 null. 표시할 제안된 옵션의 수를 제한해요. 예를 들어config.limit이100이면 처음100개의 일치하는 옵션만 표시됩니다. 많은 옵션이 일치하고 가상화가 설정되지 않은 경우 유용할 수 있어요.config.matchFrom('any' | 'start' [선택]): 기본값'any'.config.stringify(func [선택]): 옵션이 문자열로 변환되어 입력 텍스트 조각과 매칭되는 방식을 제어해요.config.trim(bool [선택]): 기본값false. 뒤따르는 공백을 제거해요.
반환 (Returns)
filterOptions: 반환된 필터 메서드는 Autocomplete 컴포넌트의 filterOptions prop에 직접 제공하거나, 훅의 같은 이름의 매개변수로 제공할 수 있어요.
다음 데모에서 옵션은 쿼리 접두사로 시작해야 해요:
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option) => option.title,
});
<Autocomplete filterOptions={filterOptions} />;
import TextField from '@mui/material/TextField';
import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
const filterOptions = createFilterOptions({
matchFrom: 'start',
stringify: (option: FilmOptionType) => option.title,
});
export default function Filter() {
return (
<Autocomplete
options={top100Films}
getOptionLabel={(option) => option.title}
filterOptions={filterOptions}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Custom filter" />}
/>
);
}
interface FilmOptionType {
title: string;
year: number;
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: 'The Shawshank Redemption', year: 1994 },
{ title: 'The Godfather', year: 1972 },
{ title: 'The Godfather: Part II', year: 1974 },
{ title: 'The Dark Knight', year: 2008 },
{ title: '12 Angry Men', year: 1957 },
{ title: "Schindler's List", year: 1993 },
{ title: 'Pulp Fiction', year: 1994 },
{
title: 'The Lord of the Rings: The Return of the King',
year: 2003,
},
{ title: 'The Good, the Bad and the Ugly', year: 1966 },
{ title: 'Fight Club', year: 1999 },
{
title: 'The Lord of the Rings: The Fellowship of the Ring',
year: 2001,
},
{
title: 'Star Wars: Episode V - The Empire Strikes Back',
year: 1980,
},
{ title: 'Forrest Gump', year: 1994 },
{ title: 'Inception', year: 2010 },
{
title: 'The Lord of the Rings: The Two Towers',
year: 2002,
},
{ title: "One Flew Over the Cuckoo's Nest", year: 1975 },
{ title: 'Goodfellas', year: 1990 },
{ title: 'The Matrix', year: 1999 },
{ title: 'Seven Samurai', year: 1954 },
{
title: 'Star Wars: Episode IV - A New Hope',
year: 1977,
},
{ title: 'City of God', year: 2002 },
{ title: 'Se7en', year: 1995 },
{ title: 'The Silence of the Lambs', year: 1991 },
{ title: "It's a Wonderful Life", year: 1946 },
{ title: 'Life Is Beautiful', year: 1997 },
{ title: 'The Usual Suspects', year: 1995 },
{ title: 'Léon: The Professional', year: 1994 },
{ title: 'Spirited Away', year: 2001 },
{ title: 'Saving Private Ryan', year: 1998 },
{ title: 'Once Upon a Time in the West', year: 1968 },
{ title: 'American History X', year: 1998 },
{ title: 'Interstellar', year: 2014 },
{ title: 'Casablanca', year: 1942 },
{ title: 'City Lights', year: 1931 },
{ title: 'Psycho', year: 1960 },
{ title: 'The Green Mile', year: 1999 },
{ title: 'The Intouchables', year: 2011 },
{ title: 'Modern Times', year: 1936 },
{ title: 'Raiders of the Lost Ark', year: 1981 },
{ title: 'Rear Window', year: 1954 },
{ title: 'The Pianist', year: 2002 },
{ title: 'The Departed', year: 2006 },
{ title: 'Terminator 2: Judgment Day', year: 1991 },
{ title: 'Back to the Future', year: 1985 },
{ title: 'Whiplash', year: 2014 },
{ title: 'Gladiator', year: 2000 },
{ title: 'Memento', year: 2000 },
{ title: 'The Prestige', year: 2006 },
{ title: 'The Lion King', year: 1994 },
{ title: 'Apocalypse Now', year: 1979 },
{ title: 'Alien', year: 1979 },
{ title: 'Sunset Boulevard', year: 1950 },
{
title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',
year: 1964,
},
{ title: 'The Great Dictator', year: 1940 },
{ title: 'Cinema Paradiso', year: 1988 },
{ title: 'The Lives of Others', year: 2006 },
{ title: 'Grave of the Fireflies', year: 1988 },
{ title: 'Paths of Glory', year: 1957 },
{ title: 'Django Unchained', year: 2012 },
{ title: 'The Shining', year: 1980 },
{ title: 'WALL·E', year: 2008 },
{ title: 'American Beauty', year: 1999 },
{ title: 'The Dark Knight Rises', year: 2012 },
{ title: 'Princess Mononoke', year: 1997 },
{ title: 'Aliens', year: 1986 },
{ title: 'Oldboy', year: 2003 },
{ title: 'Once Upon a Time in America', year: 1984 },
{ title: 'Witness for the Prosecution', year: 1957 },
{ title: 'Das Boot', year: 1981 },
{ title: 'Citizen Kane', year: 1941 },
{ title: 'North by Northwest', year: 1959 },
{ title: 'Vertigo', year: 1958 },
{
title: 'Star Wars: Episode VI - Return of the Jedi',
year: 1983,
},
{ title: 'Reservoir Dogs', year: 1992 },
{ title: 'Braveheart', year: 1995 },
{ title: 'M', year: 1931 },
{ title: 'Requiem for a Dream', year: 2000 },
{ title: 'Amélie', year: 2001 },
{ title: 'A Clockwork Orange', year: 1971 },
{ title: 'Like Stars on Earth', year: 2007 },
{ title: 'Taxi Driver', year: 1976 },
{ title: 'Lawrence of Arabia', year: 1962 },
{ title: 'Double Indemnity', year: 1944 },
{
title: 'Eternal Sunshine of the Spotless Mind',
year: 2004,
},
{ title: 'Amadeus', year: 1984 },
{ title: 'To Kill a Mockingbird', year: 1962 },
{ title: 'Toy Story 3', year: 2010 },
{ title: 'Logan', year: 2017 },
{ title: 'Full Metal Jacket', year: 1987 },
{ title: 'Dangal', year: 2016 },
{ title: 'The Sting', year: 1973 },
{ title: '2001: A Space Odyssey', year: 1968 },
{ title: "Singin' in the Rain", year: 1952 },
{ title: 'Toy Story', year: 1995 },
{ title: 'Bicycle Thieves', year: 1948 },
{ title: 'The Kid', year: 1921 },
{ title: 'Inglourious Basterds', year: 2009 },
{ title: 'Snatch', year: 2000 },
{ title: '3 Idiots', year: 2009 },
{ title: 'Monty Python and the Holy Grail', year: 1975 },
];
고급 (Advanced)
더 풍부한 필터링 메커니즘, 예를 들어 퍼지 매칭(fuzzy matching)을 원한다면 match-sorter를 살펴보는 것을 권장해요. 예를 들어:
import { matchSorter } from 'match-sorter';
const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue);
<Autocomplete filterOptions={filterOptions} />;
가상화 (Virtualization)
무작위로 생성된 10,000개의 옵션 안에서 검색해 보세요. 목록은 react-window 덕분에 가상화되어 있어요.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
import useMediaQuery from '@mui/material/useMediaQuery';
import ListSubheader from '@mui/material/ListSubheader';
import Popper from '@mui/material/Popper';
import { useTheme, styled } from '@mui/material/styles';
import {
List,
RowComponentProps,
useListRef,
ListImperativeAPI,
} from 'react-window';
import Typography from '@mui/material/Typography';
const LISTBOX_PADDING = 8; // px
type ItemData = Array<
| {
key: number;
group: string;
children: React.ReactNode;
}
| [React.ReactElement, string, number]
>;
function RowComponent({
index,
itemData,
style,
}: RowComponentProps & {
itemData: ItemData;
}) {
const dataSet = itemData[index];
const inlineStyle = {
...style,
top: ((style.top as number) ?? 0) + LISTBOX_PADDING,
};
if ('group' in dataSet) {
return (
<ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
{dataSet.group}
</ListSubheader>
);
}
const { key, ...optionProps } = dataSet[0];
return (
<Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
{`#${dataSet[2] + 1} - ${dataSet[1]}`}
</Typography>
);
}
// Adapter for react-window v2
const ListboxComponent = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLElement> & {
internalListRef: React.Ref<ListImperativeAPI>;
onItemsBuilt: (optionIndexMap: Map<string, number>) => void;
}
>(function ListboxComponent(props, ref) {
const { children, internalListRef, onItemsBuilt, ...other } = props;
const itemData: ItemData = [];
const optionIndexMap = React.useMemo(() => new Map<string, number>(), []);
(children as ItemData).forEach((item) => {
itemData.push(item);
if ('children' in item && Array.isArray(item.children)) {
itemData.push(...item.children);
}
});
// Map option values to their indices in the flattened array
itemData.forEach((item, index) => {
if (Array.isArray(item) && item[1]) {
optionIndexMap.set(item[1], index);
}
});
React.useEffect(() => {
if (onItemsBuilt) {
onItemsBuilt(optionIndexMap);
}
}, [onItemsBuilt, optionIndexMap]);
const theme = useTheme();
const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
noSsr: true,
});
const itemCount = itemData.length;
const itemSize = smUp ? 36 : 48;
const getChildSize = (child: ItemData[number]) => {
if (child.hasOwnProperty('group')) {
return 48;
}
return itemSize;
};
const getHeight = () => {
if (itemCount > 8) {
return 8 * itemSize;
}
return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
};
// Separate className for List, other props for wrapper div (ARIA, handlers)
const { className, style, ...otherProps } = other;
return (
<div ref={ref} {...otherProps}>
<List
className={className}
listRef={internalListRef}
key={itemCount}
rowCount={itemCount}
rowHeight={(index) => getChildSize(itemData[index])}
rowComponent={RowComponent}
rowProps={{ itemData }}
style={{
height: getHeight() + 2 * LISTBOX_PADDING,
width: '100%',
}}
overscanCount={5}
tagName="ul"
/>
</div>
);
});
function random(length: number) {
const characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = '';
for (let i = 0; i < length; i += 1) {
result += characters.charAt(Math.floor(Math.random() * characters.length));
}
return result;
}
const StyledPopper = styled(Popper)({
[`& .${autocompleteClasses.listbox}`]: {
boxSizing: 'border-box',
'& ul': {
padding: 0,
margin: 0,
},
},
});
const OPTIONS = Array.from(new Array(10000))
.map(() => random(10 + Math.ceil(Math.random() * 20)))
.sort((a: string, b: string) => a.toUpperCase().localeCompare(b.toUpperCase()));
export default function Virtualize() {
// Use react-window v2's useListRef hook for imperative API access
const internalListRef = useListRef(null);
const optionIndexMapRef = React.useRef<Map<string, number>>(new Map());
const handleItemsBuilt = React.useCallback(
(optionIndexMap: Map<string, number>) => {
optionIndexMapRef.current = optionIndexMap;
},
[],
);
// Handle keyboard navigation by scrolling to highlighted option
const handleHighlightChange = (
event: React.SyntheticEvent,
option: string | null,
) => {
if (option && internalListRef.current) {
const index = optionIndexMapRef.current.get(option);
if (index !== undefined) {
internalListRef.current.scrollToRow({ index, align: 'auto' });
}
}
};
return (
<Autocomplete
sx={{ width: 300 }}
disableListWrap
options={OPTIONS}
groupBy={(option) => option[0].toUpperCase()}
renderInput={(params) => <TextField {...params} label="10,000 options" />}
renderOption={(props, option, state) =>
[props, option, state.index] as React.ReactNode
}
renderGroup={(params) => params as any}
onHighlightChange={handleHighlightChange}
slots={{
popper: StyledPopper,
}}
slotProps={{
listbox: {
component: ListboxComponent,
internalListRef,
onItemsBuilt: handleItemsBuilt,
} as any,
}}
/>
);
}
이벤트 (Events)
기본 키 핸들러 동작을 방지하고 싶다면, 이벤트의 defaultMuiPrevented 속성을 true로 설정하면 돼요:
<Autocomplete
onKeyDown={(event) => {
if (event.key === 'Enter') {
// Prevent's default 'Enter' behavior.
event.defaultMuiPrevented = true;
// your handler code
}
}}
/>
제한 사항 (Limitations)
autocomplete/autofill
브라우저에는 사용자가 폼 입력을 채우는 데 도움을 주는 휴리스틱(heuristics)이 있어요. 하지만 이것이 컴포넌트의 UX를 해칠 수 있어요.
기본적으로 컴포넌트는 autoComplete="off" 속성으로 입력의 autocomplete 기능(주어진 필드에 이전 세션에서 사용자가 입력한 것을 기억하는 것)을 비활성화해요. Google Chrome은 현재 이 속성 설정을 지원하지 않아요 (Issue 41239842). 가능한 해결 방법은 id를 제거해서 컴포넌트가 임의의 id를 생성하게 하는 거예요.
과거에 입력한 값을 기억하는 것 외에도, 브라우저는 autofill 제안(저장된 로그인, 주소, 결제 정보)을 제안할 수도 있어요. autofill을 피하고 싶다면 다음을 시도해 볼 수 있어요:
- 브라우저가 사용할 수 있는 정보를 노출하지 않는 방식으로 입력 이름을 지으세요. 예를 들어
id="country"대신id="field1"처럼요. id를 비워두면 컴포넌트는 무작위 id를 사용해요. autoComplete="new-password"로 설정하세요 (일부 브라우저는 이 속성 설정이 있는 입력에 강력한 비밀번호를 제안할 거예요):
<TextField
{...params}
slotProps={{
...params.slotProps,
htmlInput: {
...params.slotProps.htmlInput,
autoComplete: 'new-password',
},
}}
/>
MDN의 이 가이드를 읽어 더 자세히 알아보세요.
ListboxComponent
커스텀 ListboxComponent prop을 제공한다면, 의도한 스크롤 컨테이너에 role 속성이 listbox로 설정되어 있는지 확인해야 해요. 이는 예를 들어 키보드로 탐색할 때 스크롤이 올바르게 동작하도록 보장합니다.
접근성 (Accessibility)
(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/)
텍스트박스에 라벨을 사용하는 것을 권장해요. 컴포넌트는 WAI-ARIA authoring practices를 구현한다.
Autocomplete API
데모 (Demos)
이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:
Import
import Autocomplete from '@mui/material/Autocomplete';
// or
import { Autocomplete } from '@mui/material';
Props
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 필수 (Required) | 설명 (Description) |
|---|---|---|---|---|
| options | array |
- | Yes | |
| renderInput | function(params: object) => ReactNode |
- | Yes | |
| autoComplete | bool |
false |
No | |
| autoHighlight | bool |
false |
No | |
| autoSelect | bool |
false |
No | |
| blurOnSelect | 'mouse' | 'touch' | bool |
false |
No | |
| classes | object |
- | No | Override or extend the styles applied to the component. |
| clearIcon | node |
<ClearIcon fontSize="small" /> |
No | |
| clearOnBlur | bool |
!props.freeSolo |
No | |
| clearOnEscape | bool |
false |
No | |
| clearText | string |
'Clear' |
No | |
| closeText | string |
'Close' |
No | |
| defaultValue | any |
props.multiple ? [] : null |
No | |
| disableClearable | bool |
false |
No | |
| disableCloseOnSelect | bool |
false |
No | |
| disabled | bool |
false |
No | |
| disabledItemsFocusable | bool |
false |
No | |
| disableListWrap | bool |
false |
No | |
| disablePortal | bool |
false |
No | |
| filterOptions | function(options: Array<Value>, state: object) => Array<Value> |
createFilterOptions() |
No | |
| filterSelectedOptions | bool |
false |
No | |
| forcePopupIcon | 'auto' | bool |
'auto' |
No | |
| freeSolo | bool |
false |
No | |
| fullWidth | bool |
false |
No | |
| getLimitTagsText | function(more: number) => ReactNode |
(more) => \+${more}`` |
No | |
| getOptionDisabled | function(option: Value) => boolean |
- | No | |
| getOptionKey | function(option: Value) => string | number |
- | No | |
| getOptionLabel | function(option: Value | string) => string |
(option) => option.label ?? option |
No | |
| groupBy | function(option: Value) => string |
- | No | |
| handleHomeEndKeys | bool |
!props.freeSolo |
No | |
| id | string |
- | No | |
| includeInputInList | bool |
false |
No | |
| inputValue | string |
- | No | |
| isOptionEqualToValue | function(option: Value, value: Value | string) => boolean |
- | No | |
| limitTags | integer |
-1 |
No | |
| loading | bool |
false |
No | |
| loadingText | node |
'Loading…' |
No | |
| multiple | bool |
false |
No | |
| noOptionsText | node |
'No options' |
No | |
| onChange | function(event: React.SyntheticEvent, value: Value | Array<Value>, reason: string, details?: string) => void |
- | No | |
| onClose | function(event: React.SyntheticEvent, reason: string) => void |
- | No | |
| onHighlightChange | function(event: React.SyntheticEvent, option: Value, reason: string) => void |
- | No | |
| onInputChange | function(event: React.SyntheticEvent, value: string, reason: string) => void |
- | No | |
| onOpen | function(event: React.SyntheticEvent) => void |
- | No | |
| open | bool |
- | No | |
| openOnFocus | bool |
false |
No | |
| openText | string |
'Open' |
No | |
| popupIcon | node |
<ArrowDropDownIcon /> |
No | |
| readOnly | bool |
false |
No | |
| renderGroup | function(params: AutocompleteRenderGroupParams) => ReactNode |
- | No | |
| renderOption | function(props: object, option: Value, state: object, ownerState: object) => ReactNode |
- | No | |
| renderValue | function(value: AutocompleteRenderValue<Value, Multiple, FreeSolo>, getItemProps: function, ownerState: object) => ReactNode |
- | No | |
| resetHighlightOnMouseLeave | bool |
false |
No | |
| selectOnFocus | bool |
!props.freeSolo |
No | |
| size | 'small' | 'medium' | string |
'medium' |
No | |
| slotProps | { chip?: func | object, clearIndicator?: func | object, listbox?: func | object, status?: func | object, paper?: func | object, popper?: func | object, popupIndicator?: func | object, root?: func | object } |
{} |
No | |
| slots | { clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType, root?: elementType, status?: elementType } |
{} |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| value | any |
- | No |
참고 (Note):
ref는 루트 요소로 전달됩니다.
제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.
테마 기본 props (Theme default props)
MuiAutocomplete를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.
슬롯 (Slots)
| 이름 (Name) | 기본값 (Default) | 클래스 (Class) | 설명 (Description) |
|---|---|---|---|
| root | 'div' |
.MuiAutocomplete-root |
The component that renders the root. |
| clearIndicator | IconButton |
.MuiAutocomplete-clearIndicator |
The component used to render the clear indicator element. |
| popupIndicator | IconButton |
.MuiAutocomplete-popupIndicator |
The component used to render the popup indicator element. |
| listbox | 'ul' |
.MuiAutocomplete-listbox |
The component used to render the listbox. |
| status | 'div' |
.MuiAutocomplete-status |
The component used to render the status message container. |
| paper | Paper |
.MuiAutocomplete-paper |
The component used to render the body of the popup. |
| popper | Popper |
.MuiAutocomplete-popper |
The component used to position the popup. |
CSS
규칙 이름 (Rule name)
| 전역 클래스 (Global class) | 규칙 이름 (Rule name) | 설명 (Description) |
|---|---|---|
| - | endAdornment | Styles applied to the endAdornment element. |
.Mui-expanded |
- | State class applied to the root element if the listbox is displayed. |
.Mui-focused |
- | State class applied to the root element if focused. |
.Mui-focusVisible |
- | Styles applied to the option elements if they are keyboard focused. |
| - | fullWidth | Styles applied to the root element if fullWidth={true}. |
| - | groupLabel | Styles applied to the group's label elements. |
| - | groupUl | Styles applied to the group's ul elements. |
| - | hasClearIcon | Styles applied when the clear icon is rendered. |
| - | hasPopupIcon | Styles applied when the popup icon is rendered. |
| - | input | Styles applied to the input element. |
| - | inputFocused | Styles applied to the input element if the input is focused. |
| - | inputRoot | Styles applied to the Input element. |
| - | loading | Styles applied to the loading wrapper. |
| - | noOptions | Styles applied to the no option wrapper. |
| - | option | Styles applied to the option elements. |
| - | popperDisablePortal | Styles applied to the popper element if disablePortal={true}. |
| - | popupIndicatorOpen | Styles applied to the popup indicator if the popup is open. |
| - | tag | Styles applied to the tag elements, for example the chips. |
| - | tagSizeMedium | Styles applied to the tag elements, for example the chips if size="medium". |
| - | tagSizeSmall | Styles applied to the tag elements, for example the chips if size="small". |
소스 코드 (Source code)
이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.
Popper API
데모 (Demos)
이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:
Import
import Popper from '@mui/material/Popper';
Props
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 필수 (Required) | 설명 (Description) |
|---|---|---|---|---|
| open | bool |
- | Yes | |
| anchorEl | HTML element | object | func |
- | No | |
| children | node | func |
- | No | |
| component | elementType |
- | No | |
| container | HTML element | func |
- | No | |
| disablePortal | bool |
false |
No | |
| keepMounted | bool |
false |
No | |
| modifiers | Array<{ data?: object, effect?: func, enabled?: bool, fn?: func, name?: any, options?: object, phase?: 'afterMain' | 'afterRead' | 'afterWrite' | 'beforeMain' | 'beforeRead' | 'beforeWrite' | 'main' | 'read' | 'write', requires?: Array<string>, requiresIfExists?: Array<string> }> |
- | No | |
| placement | 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' |
'bottom' |
No | |
| popperOptions | { modifiers?: array, onFirstUpdate?: func, placement?: 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top', strategy?: 'absolute' | 'fixed' } |
{} |
No | |
| popperRef | ref |
- | No | |
| slotProps | { root?: func | object } |
{} |
No | |
| slots | { root?: elementType } |
{} |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| transition | bool |
false |
No |
참고 (Note):
ref는 루트 요소(HTMLDivElement)로 전달됩니다.
제공된 다른 모든 props는 루트 요소(네이티브 요소)로 전달됩니다.
CSS
규칙 이름 (Rule name)
| 전역 클래스 (Global class) | 규칙 이름 (Rule name) | 설명 (Description) |
|---|---|---|
| - | root | Class name applied to the root element. |
소스 코드 (Source code)
이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.
TextField API
데모 (Demos)
이 React 컴포넌트의 사용 예시와 자세한 내용은 컴포넌트 데모 페이지를 방문해 보세요:
Import
import TextField from '@mui/material/TextField';
// or
import { TextField } from '@mui/material';
Props
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 필수 (Required) | 설명 (Description) |
|---|---|---|---|---|
| autoComplete | string |
- | No | |
| autoFocus | bool |
false |
No | |
| classes | object |
- | No | Override or extend the styles applied to the component. |
| color | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string |
'primary' |
No | |
| defaultValue | any |
- | No | |
| disabled | bool |
false |
No | |
| error | bool |
false |
No | |
| fullWidth | bool |
false |
No | |
| helperText | node |
- | No | |
| id | string |
- | No | |
| inputRef | ref |
- | No | |
| label | node |
- | No | |
| margin | 'dense' | 'none' | 'normal' |
'none' |
No | |
| maxRows | number | string |
- | No | |
| minRows | number | string |
- | No | |
| multiline | bool |
false |
No | |
| name | string |
- | No | |
| onChange | function(event: object) => void |
- | No | |
| placeholder | string |
- | No | |
| required | bool |
false |
No | |
| rows | number | string |
- | No | |
| select | bool |
false |
No | |
| size | 'medium' | 'small' | string |
'medium' |
No | |
| slotProps | { formHelperText?: func | object, htmlInput?: func | object, input?: func | object, inputLabel?: func | object, select?: func | object } |
{} |
No | |
| slots | { formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, root?: elementType, select?: elementType } |
{} |
No | |
| sx | Array<func | object | bool> | func | object |
- | No | The system prop that allows defining system overrides as well as additional CSS styles. |
| type | string |
- | No | |
| value | any |
- | No | |
| variant | 'filled' | 'outlined' | 'standard' |
'outlined' |
No |
참고 (Note):
ref는 루트 요소로 전달됩니다.
제공된 다른 모든 props는 루트 요소(FormControl)로 전달됩니다.
상속 (Inheritance)
위에 명시적으로 문서화되진 않았지만, FormControl 컴포넌트의 props는 TextField에서도 사용할 수 있어요.
테마 기본 props (Theme default props)
MuiTextField를 사용해 테마로 이 컴포넌트의 기본 props를 변경할 수 있어요.
슬롯 (Slots)
| 이름 (Name) | 기본값 (Default) | 클래스 (Class) | 설명 (Description) |
|---|---|---|---|
| root | FormControl |
.MuiTextField-root |
The component that renders the root. |
| input | OutlinedInput |
- | The component that renders the input. |
| inputLabel | InputLabel |
- | The component that renders the input's label. |
| htmlInput | 'input' |
- | The html input element. |
| formHelperText | FormHelperText |
- | The component that renders the helper text. |
| select | Select |
- | The component that renders the select. |
소스 코드 (Source code)
이 페이지에서 필요한 정보를 찾지 못했다면, 컴포넌트의 구현을 살펴보면서 더 자세한 내용을 확인해 보세요.