material-ui/lab/Autocomplete, mui/material/Autocomplete

Autocomplete 개념정리

• options: input화면 클릭하여 나오는, 선택가능한 dropdown list들에 보여주기 위한 array
• value: options중에서 선택된 값, multiple일 경우에는 array가 됨
• tag: 선택된 value가 input란에 이미 선택되었음을 보여주는 것...? multiple일 때 의미가 있을 듯

import Autocomplete from '@material-ui/lab/Autocomplete';//mui 4.x버젼에는 lab에포함됨
import Autocomplete from '@mui/material/Autocomplete';//mui 5.x버젼이후에는 정식포함됨

<Autocomplete
    multiple
    open={open}//항상 false로 하면  생략된 tags는 펼쳐지고 dropdownOptionMenu나오는것만 방지할 수 있음,
    disabled={disabled}
    limitTags={1}//limit the number of displayed options when not focused
    id="searchAndMultiSelect"
    options={this.props.options||[]}//display될 option array
    value={this.props.value}//option중에 선택된 value
    disableCloseOnSelect//option에 focus가는동안은 선택했더라도 close하지않고 계속option노출하기
    onChange={(e,v)=>{this.props.onChange(e,v,this.props.selectType);}}//select할때마다 호출됨, dropdownOption에서 클릭안하고 선택된 tab의 X(delete)버튼이나 전체 X(delete)버튼 클릭시에도 호출됨
    getOptionLabel={(option) => this.props.getOptionLabel(option, this.props.selectType)}//option array에서 노출할 속성지정, renderOption주더라도 없으면에러남
    getOptionDisabled={(option) => this.props.getOptionDisabled(option)}//어떤 option을 선택못하게 할 것인지
    noOptionsText={intl.formatMessage({id: noOptionsText})}//장치가 존재하지 않습니다
    getOptionSelected={(option, value) => option.id ? option.id === value.id : option===value}//option에서 value를 뽑아내어 selected:true/false를 결정할 때 어떤 기준으로 결정할지
    renderInput={(params) =>
        <TextField
            className={classes.textField}
            { ...params }
            //placeholder={isEmpty(value) ? intl.formatMessage({id: placeholder}) : undefined}
            onFocus={() => this.handleFocus()}
            onBlur={() => this.handleBlur()}
            label={this.props.selectType&&intl.formatMessage({id: this.props.selectType})}
        />
    }
    renderOption={(option, {selected}) => {
        //2nd argument is {selected:true/false, inputValue:''}
        return this.props.renderOption(option, {selected}, this.props.selectType);
    }}
    //renderTags={(tagValue, getTagProps) =>tagValue.map((option, index) => (//Input에 선택된 tag를 보여주는 형태결정
    //         <Chip key={index} label={option.name||option.deviceGroupName}
	//             {...getTagProps({ index })} disabled={disabled} />// Set disable explicitly after getTagProps
    //filterOptions={fieldTypeList => fieldTypeList.filter(opt => opt.fieldType)}//option에서 filter된것만 노출함, 모두filtering해도 noOptions항목노출됨
    //onOpen = {()=>{}}//selector click해서 열렸을때 동작정의
    //readOnly //작동안함, 4.x버전에서는 안되는듯
    
/>