javascript - React/MaterialUI - How can I replicate this FilterOption to fit my <AutoComplete> component?

Question

I would like to know how I can have my <AutoComplete> field to replicate this example from 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)
          );
        });
      }}

I'm trying to accomplish a search filter that combines options.symbol and options.company as options. However with my current code below, I can only do one or the other. My renderOptions and rederInput are exactly how they should be, but I'm only able to actually search for the options.symbol as the parameter, I would like to combine both options as searching parameters.

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

The material UI method looks overkill? I'm wondering if there is a simpler way to do this.

Answer 1

等待大神解答