限制自动完成组件的建议数量

Question

我一直在寻找自动完成组件的（https://material-ui.com/api/autocomplete/）API，但我似乎找不到一种方法（从我有限的 javascript 知识）只显示文本字段下方有一定数量的选项。

我正在尝试将搜索功能与超过 7,000 条数据结合起来，但我不想立即显示所有数据。如何将选项限制为最多 10 个建议？

Answer 1

filterOptions这可以使用prop 和function来完成createFilterOptions。

...
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问题