Static search + throttle

Author: mathieudutour

README.md

@@ -82,6 +82,14 @@ Class of the Component (in addition of `search-input`).
 
 Function called when the search term is changed (will be passed as an argument).
 
+##### filterKeys
+
+Either an `[String]` or a `String`. Will be use by the `filter` method if no argument is passed there.
+
+##### throttle
+
+Reduce call frequency to the `onChange` function (in ms). Default is 200.
+
 ### Methods
 
 ##### filter([keys])
@@ -90,6 +98,14 @@ Return a function which can be used to filter an array. `keys` can be `String`,
 
 If an array `keys` is an array, the function will return true if at least one of the keys of the item matches the serch term.
 
+### Static Methods
+
+##### filter(searchTerm, [keys])
+
+Return a function which can be used to filter an array. `searchTerm` can be a `regex` or a `String`. `keys` can be `String`, `[String]` or `null`.
+
+If an array `keys` is an array, the function will return true if at least one of the keys of the item matches the serch term.
+
 ## Styles
 
 Look at [react-search-input.css](https://github.com/mathieudutour/react-search-input/blob/master/react-search-input.css) for an idea on how to style this component.

react-search-input.js

@@ -39,46 +39,56 @@
       this.setState({
         searchTerm: searchTerm
       }, function() {
-        if (this.props.onChange) {
-          this.props.onChange(searchTerm);
+        if (this._throttleTimeout) {
+          clearTimeout(this._throttleTimeout);
         }
+        this._throttleTimeout = setTimeout(function() {
+          if (this.props.onChange) {
+            this.props.onChange(searchTerm);
+          }
+        }.bind(this), this.props.throttle);
       }.bind(this));
-
     },
 
     filter: function(keys) {
-      return function(item) {
-        var term = this.state.searchTerm;
-        if (term === '') {return true;}
-        // escape special symbols to ensure `term` is a valid regex
-        term = term.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+      return Search.filter(this.state.searchTerm,
+                           keys || this.props.filterKeys);
+    },
 
-        var name = item;
+    statics: {
+      filter: function(term, keys) {
+        return function(item) {
+          if (term === '') {return true;}
+          // escape special symbols to ensure `term` is a valid regex
+          term = term.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
 
-        var _getNameForKey = function(_key, _name) {
-          var keys = _key.split('.');
-          keys.forEach(function(__key) {
-            _name = _name[__key];
-          });
+          var _getValueForKey = function(key, _item) {
+            var keys = key.split('.');
+            var result = _item;
+            keys.forEach(function(_key) {
+              result = result && result[_key];
+            });
 
-          return _name.toLowerCase();
-        };
+            return result && result.toLowerCase();
+          };
 
-        if (keys) {
-          if( typeof keys === 'string' ) {
-            keys = [keys];
-          }
-          for (var i = 0; i < keys.length; i++) {
-            if (_getNameForKey(keys[i], name).search(term) !== -1) {
-              return true;
+          if (keys) {
+            if( typeof keys === 'string' ) {
+              keys = [keys];
+            }
+            for (var i = 0; i < keys.length; i++) {
+              var value = _getValueForKey(keys[i], item);
+              if (value && value.search(term) !== -1) {
+                return true;
+              }
             }
+            return false;
+          } else {
+            var stringValue = item.toLowerCase();
+            return (stringValue.search(term) !== -1);
           }
-          return false;
-        } else {
-          name = name.toLowerCase();
-          return (name.search(term) !== -1);
-        }
-      }.bind(this);
+        }.bind(this);
+      }
     }
   });