diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index dd174a00644a76..d19a2047a53d5c 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/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 diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index 2c98da8abca486..5e058d12693643 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/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) { diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.test.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.test.js index 0256338ee23cfc..3718b6b421192a 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.test.js +++ b/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], + ]); + }); + }); });