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버전에서는 안되는듯
/>
