Блог

Я использовал компонент автозаполнения таким образом:

 import Autocomplete  from "@material-ui/lab/Autocomplete";
const Autocomplete = (props) => {
///code
     <Autocomplete 
            multiple={props.multiple}
            placeholder={props.placeholder}
            getOptionLabel={(option) => option[props.getOptionLabel]}
            filterOptions={(x) => x}
            options={props.options}
            autoComplete
            filterSelectedOptions
            freeSolo
            value={props.value}
            defaultValue={props.defaultValue}
            onDelete={props.onDelete}
            inputValue={props.inputValue}
            autoHighlight
            onChange={props.onChange ?(event, value) => props.onChange(value) :""}
            onInputChange={props.onInputChange ?(event, value) => props.onInputChange(value):""}
            renderOption={props.renderOption}
            renderInput={
              props.renderInput
                ? props.renderInput
                : (params) => {
                    return (
                      <Input
                        {...params}
                        label={props.label}
                        placeholder={props.placeholder}
                        fullWidth
                        error={props.error}
                        inputLabelClassName={props.inputLabelClassName}
                        inputProps={{
                          ...params.inputProps,
                        }}
                        endAdornment={
                          <Link onClick={clearInput}>
                            <CloseIcon className={classes.adornment}></CloseIcon>
                          </Link>
                        }
                      />
}
 

И я хочу иметь что-то вроде этого:https://codesandbox.io/s/dkicr?файл=/demo.js:231-317

Я делаю это с помощью компонента, который написал сам:

 import Autocomplete from "../UI/autocomplete/autocomplete";

   <Controller
                    control={control}
                    name="continentId"
                    rules={{ required: true }}
                    render={(props) => (
                    
                     <Autocomplete
          options={continentOption}
          getOptionLabel="title"
          onChange={onTagsChange}
          renderInput={params => (
            <TextField
              {...params}
              variant="standard"
              placeholder="Favorites"
              margin="normal"
              fullWidth
            />
          )}
        />
      )}
      ></Controller>
 

Но, похоже, поиск не работает … Я могу видеть весь список, но когда я что-то ищу, у меня снова есть все данные.

Как я могу это получить(https://codesandbox.io/s/dkicr?file=/demo.js:231-317) с моим компонентом(../пользовательский интерфейс/автозаполнение/автозаполнение)