limit the number of suggestions AutoComplete component

Question

I've been looking at the (https://material-ui.com/api/autocomplete/) API for the autocomplete component but I can't seem to find a way (from my limited knowledge of javascript) to only display a certain number of options below the TextField.

I'm trying to incorporate a search function with over 7,000 data but I don't want to display all of it at once. How can I limit the options to at most 10 suggestions?

Answer 1

This can be done using filterOptions prop and createFilterOptions function.

...
import { Autocomplete, createFilterOptions } from "@material-ui/lab";

const OPTIONS_LIMIT = 10;
const defaultFilterOptions = createFilterOptions();

const filterOptions = (options, state) => {
  return defaultFilterOptions(options, state).slice(0, OPTIONS_LIMIT);
};

function ComboBox() {
  return (
    <Autocomplete
      filterOptions={filterOptions}
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={(option) => option.title}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Combo box" variant="outlined" />
      )}
    />
  );
}

GitHub issue