[Autocomplete] Support limiting the amount of options

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

@@ -134,6 +134,7 @@ It supports the following options:
   - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`.
   - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`.
   - `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.
 
 In the following demo, the options need to start with the query prefix:
 

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

@@ -5,6 +5,7 @@ import describeConformance from '@material-ui/core/test-utils/describeConformanc
 import consoleErrorMock from 'test/utils/consoleErrorMock';
 import { spy } from 'sinon';
 import { createClientRender, fireEvent } from 'test/utils/createClientRender';
+import { createFilterOptions } from '../useAutocomplete/useAutocomplete';
 import Autocomplete from './Autocomplete';
 import TextField from '@material-ui/core/TextField';
 
@@ -867,6 +868,30 @@ describe('<Autocomplete />', () => {
       options = queryAllByRole('option');
       expect(options.length).to.equal(1);
     });
+
+    it('limits the amount of rendered options when `limit` is set in `createFilterOptions`', () => {
+      const filterOptions = createFilterOptions({ limit: 2 });
+      const { queryAllByRole } = render(
+        <Autocomplete
+          options={['one', 'two', 'three']}
+          renderInput={params => <TextField {...params} autoFocus />}
+          filterOptions={filterOptions}
+        />,
+      );
+      expect(queryAllByRole('option').length).to.equal(2);
+    });
+
+    it('does not limit the amount of rendered options when `limit` is not set in `createFilterOptions`', () => {
+      const filterOptions = createFilterOptions({});
+      const { queryAllByRole } = render(
+        <Autocomplete
+          options={['one', 'two', 'three']}
+          renderInput={params => <TextField {...params} autoFocus />}
+          filterOptions={filterOptions}
+        />,
+      );
+      expect(queryAllByRole('option').length).to.equal(3);
+    });
   });
 
   describe('prop: freeSolo', () => {

packages/material-ui-lab/src/useAutocomplete/useAutocomplete.d.ts

@@ -6,6 +6,7 @@ export interface CreateFilterOptionsConfig<T> {
   matchFrom?: 'any' | 'start';
   stringify?: (option: T) => string;
   trim?: boolean;
+  limit?: number;
 }
 
 export interface FilterOptionsState {

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

@@ -36,6 +36,7 @@ export function createFilterOptions(config = {}) {
     matchFrom = 'any',
     stringify = defaultStringify,
     trim = false,
+    limit,
   } = config;
 
   return (options, { inputValue }) => {
@@ -46,8 +47,7 @@ export function createFilterOptions(config = {}) {
     if (ignoreAccents) {
       input = stripDiacritics(input);
     }
-
-    return options.filter(option => {
+    const filteredOptions = options.filter(option => {
       let candidate = stringify(option);
       if (ignoreCase) {
         candidate = candidate.toLowerCase();
@@ -58,6 +58,8 @@ export function createFilterOptions(config = {}) {
 
       return matchFrom === 'start' ? candidate.indexOf(input) === 0 : candidate.indexOf(input) > -1;
     });
+
+    return typeof limit === 'number' ? filteredOptions.slice(0, limit) : filteredOptions;
   };
 }