New filterMaxResults option to easily limit the default filtering fun…

…ction

results count. It shows the first `filterMaxResuls` items. FIX #126

README.md

@@ -379,6 +379,7 @@ function onInputKeyDown(event) {
 | `delimiter` | string | ',' | delimiter to use to join multiple values |
 | `disabled` | boolean | false | whether the Select is disabled or not |
 | `escapeClearsValue` | boolean | true | whether escape clears the value when the menu is closed |
+| `filterMaxResults` | function | undefined | limit the number of results being shown when using default filtering options. Shows first `filterMaxResults` items. |
 | `filterOption` | function | undefined | method to filter a single option `(option, filterString) => boolean` |
 | `filterOptions` | boolean or function | undefined | boolean to enable default filtering or function to filter the options array `([options], filterString, [values]) => [options]` |
 | `id` | string | undefined | html id to set on the input element for accessibility or tests

src/Select.js

@@ -990,6 +990,7 @@ class Select extends React.Component {
 				filterValue,
 				excludeOptions,
 				{
+					filterMaxResults: this.props.filterMaxResults,
 					filterOption: this.props.filterOption,
 					ignoreAccents: this.props.ignoreAccents,
 					ignoreCase: this.props.ignoreCase,
@@ -1209,6 +1210,7 @@ Select.propTypes = {
 	delimiter: PropTypes.string,          // delimiter to use to join multiple values for the hidden field value
 	disabled: PropTypes.bool,             // whether the Select is disabled or not
 	escapeClearsValue: PropTypes.bool,    // whether escape clears the value when the menu is closed
+	filterMaxResults: stringOrNumber,     // limit the filtered items to max count when using default filtering function
 	filterOption: PropTypes.func,         // method to filter a single option (option, filterString)
 	filterOptions: PropTypes.any,         // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
 	id: PropTypes.string, 				        // html id to set on the input element for accessibility or tests

src/utils/defaultFilterOptions.js

@@ -20,7 +20,7 @@ const filterOptions = (options, filterValue, excludeOptions, props) => {
 
 	if (excludeOptions) excludeOptions = excludeOptions.map(i => i[props.valueKey]);
 
-	return options.filter(option => {
+	let results = options.filter(option => {
 		if (excludeOptions && excludeOptions.indexOf(option[props.valueKey]) > -1) return false;
 		if (props.filterOption) return props.filterOption.call(undefined, option, filterValue);
 		if (!filterValue) return true;
@@ -55,6 +55,12 @@ const filterOptions = (options, filterValue, excludeOptions, props) => {
 			(labelTest && props.matchProp !== 'value' && labelTest.indexOf(filterValue) >= 0)
 		);
 	});
+
+	if (props.filterMaxResults) {
+		results = results.slice(0, props.filterMaxResults);
+	}
+
+	return results;
 };
 
 export default filterOptions;

test/Select-test.js

@@ -2920,6 +2920,26 @@ describe('Select', () => {
 				expect(options, 'to have length', 2);
 			});
 		});
+
+		describe('filterMaxResults', () => {
+
+			beforeEach(() => {
+
+				instance = createControl({
+					options: longerListOptions,
+					filterMaxResults: 3,
+					searchable: true
+				});
+			});
+			it('uses the default options', () => {
+				TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-arrow'), { button: 0 });
+				var options = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
+				expect(options[0], 'to have text', 'One');
+				expect(options[1], 'to have text', 'Two');
+				expect(options[2], 'to have text', 'Three');
+				expect(options, 'to have length', 3);
+			});
+		});
 
 		describe('empty filterOptions function', () => {