[Autocomplete] Add startAfter option (#20305)

docs/src/pages/components/autocomplete/autocomplete.md

@@ -152,10 +152,11 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete';
 1. `config` (*Object* [optional]):
  - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics.
  - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything.
+ - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up.
  - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`.
+ - `config.startAfter`(*Number* [optional]): Default to `0`. Show the suggested options only after a certain number of letters
  - `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment.
  - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces.
- - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up.
 
 #### Returns
 

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js

@@ -15,10 +15,11 @@ export function createFilterOptions(config = {}) {
  const {
  ignoreAccents = true,
  ignoreCase = true,
+ limit,
  matchFrom = 'any',
+ startAfter = 0,
  stringify,
  trim = false,
- limit,
  } = config;
 
  return (options, { inputValue, getOptionLabel }) => {
@@ -29,6 +30,11 @@ export function createFilterOptions(config = {}) {
  if (ignoreAccents) {
  input = stripDiacritics(input);
  }
+
+ if (startAfter > 0 && input.length <= startAfter) {
+ return [];
+ }
+
  const filteredOptions = options.filter((option) => {
  let candidate = (stringify || getOptionLabel)(option);
  if (ignoreCase) {

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.test.js

@@ -23,4 +23,32 @@ describe('createFilterOptions', () => {
 
  expect(filterOptions(options, { inputValue: 'a', getOptionLabel })).to.deep.equal([options[0]]);
  });
+
+ describe('option: startAfter', () => {
+ it('start to search only after the second letter', () => {
+ const filterOptions = createFilterOptions({ startAfter: 2 });
+
+ const getOptionLabel = (option) => option.name;
+ const options = [
+ {
+ id: '1234',
+ name: 'cat',
+ },
+ {
+ id: '5678',
+ name: 'dog',
+ },
+ {
+ id: '9abc',
+ name: 'emu',
+ },
+ ];
+
+ expect(filterOptions(options, { inputValue: 'c', getOptionLabel })).to.deep.equal([]);
+ expect(filterOptions(options, { inputValue: 'ca', getOptionLabel })).to.deep.equal([]);
+ expect(filterOptions(options, { inputValue: 'cat', getOptionLabel })).to.deep.equal([
+ options[0],
+ ]);
+ });
+ });
 });