Блог

Я хотел бы знать, как я могу использовать свое <AutoComplete> поле для репликации этого примера из MaterialUI

 export default function ComboBox() {
  const [selected, setSelected] = useState([]);
  const [searchText, setSearchText] = useState("");
  const onChange = (e) => setSearchText(e.target.value);

  return (
    <Autocomplete
      multiple
      filterOptions={(options, v) => {
        if (!searchText) {
          return options;
        }
        return options.filter((el) => {
          return Object.values(el).some((entry) =>
            String(entry).toLowerCase().includes(searchText)
          );
        });
      }}
 

Я пытаюсь создать фильтр поиска, который объединяет options.symbol options.company параметры и как. Однако с моим текущим кодом ниже я могу сделать только одно или другое. Мои renderOptions и rederInput точно такие, какими они должны быть, но я могу только фактически искать в options.symbol качестве параметра, я хотел бы объединить оба options параметра в качестве параметров поиска.

             <Autocomplete
                multiple
                options={data.companies}
                filterSelectedOptions
                getOptionLabel={(option) => option.symbol} 
                renderOption= {(option) => option.symbol   ' | '    option.company}
                renderInput={(params) => (
                <TextField
                    {...params}
                    variant="outlined"
                    label="Companies"
                />
                )}
            />
 

Метод пользовательского интерфейса material выглядит излишним? Мне интересно, есть ли более простой способ сделать это.