implemented max length

README.md

@@ -156,4 +156,10 @@ match = (currentInput, item) => {
 - If suppressReselect is set to false, selecting the same item again, it will trigger another onSelect callback call. 
 - Default is true.
 
+***dropDownLength***
+
+- Only display the first `dropDownLength` matches in the dropdown. Useful if the array is really big.
+- Number to specify max length of drop down.
+- Default is Infinity.
+
    

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datalist-input",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "This package provides a react component as follows: an input field with a drop down menu to pick a possible option based on the current input.",
   "main": "./lib/DataListInput.js",
   "license": "MIT",

src/DataListInput.jsx

@@ -27,22 +27,23 @@ class DataListInput extends React.Component {
      */
     onHandleInput = ( event ) => {
         const currentInput = event.target.value;
-        const { items, match } = this.props;
+        const { items, match, dropDownLength } = this.props;
         const matchingItems = items.filter( ( item ) => {
             if ( typeof ( match ) === typeof ( Function ) ) { return match( currentInput, item ); }
             return this.match( currentInput, item );
         } );
+        const displayableItems = matchingItems.slice( dropDownLength, matchingItems.length );
         if( matchingItems.length > 0) {
             this.setState( {
                 currentInput,
-                matchingItems,
+                matchingItems: displayableItems,
                 focusIndex: 0,
                 visible: true,
             } );
         } else {
             this.setState( { 
                 currentInput,
-                matchingItems,
+                matchingItems: displayableItems,
                 visible: false,
                 focusIndex: -1,
             } ) 
@@ -232,6 +233,7 @@ DataListInput.propTypes = {
     requiredInputLength: PropTypes.number,
     clearInputOnSelect: PropTypes.bool,
     suppressReselect: PropTypes.bool,
+    dropDownLength: PropTypes.number,
 };
 
 DataListInput.defaultProps = {
@@ -243,6 +245,7 @@ DataListInput.defaultProps = {
     requiredInputLength: 0,
     clearInputOnSelect: false,
     suppressReselect: true,
+    dropDownLength: Infinity,
 };
 
 export default DataListInput;