Add events. Add clearOnLoad option

README.md

@@ -1,13 +1,13 @@
 jQuery Searchable Plugin
 ========================
 
-*Latest version: v1.0.0*
+*Latest version: v1.1.0* (View the [changelog](#changelog))
 
 Tiny, fast jQuery plugin to search through elements as you type. This plugin is created and maintained by **Stidges** ( [Twitter](http://twitter.com/stidges) | [Github](http://github.com/stidges) ).
 
 ## Features
 
-- **Lightweight**. This plugin is less than 800b minified and gzipped!
+- **Lightweight**. This plugin is only ~1kB minified and gzipped!
 - **Fast**. This plugin is optimized for fast, lagless searching even through large element sets.
 - **Multiple search types**. This plugin provides three different search types out-of-the-box! Fuzzy matching, strict (case sensitive) matching and default (case insensitive) matching.
 - **Automatic row striping**. When searching through a table, rows get hidden when they don't match. When using a CSS framework like [Bootstrap](http://getbootstrap.com) this would mess up your table striping. This plugin makes allows you to define the CSS to be applied to odd and even rows, and updates them while searching.
@@ -50,6 +50,11 @@ This plugin provides the following configuration options:
 | hide | `function` | Allows you to define a custom hiding function. This function accepts one parameter, which is the element (row) being hidden. By default it will use `elem.hide()` to hide the row. |
 | show | `function` | Allows you to define a custom show function. This function accepts one parameters, which is the element (row) being hidden. By default it will use `elem.show()` to show the row. |
 | searchType | `'default'` | Defines the matcher to be used when searching. Allowed values are `'fuzzy'`, `'strict'` and `'default'`. |
+| onSearchActive | `false` | Allows you to define a function to be called when the search is active. This function will be called whenever the user is typing into the search input and the search input is not empty. The searchable element and the search term will be passed to the function. |
+| onSearchEmpty | `false` | Allows you to define a function to be called when the search input is empty. This function will be called once when the search input is empty or cleared. The searchable element will be passed to the function. |
+| onSearchFocus | `false` | Allows you to define a function to be called when the search input is focussed. The `this` context of this function will be the search input element. |
+| onSearchBlur | `false` | Allows you to define a function to be called when the search input is blurred. The `this` context of this function will be the search input element. |
+| clearOnLoad | `false` | Determines whether the search input should be cleared on page load (either `true` or `false`). |
 
 ### Example usage
 
@@ -69,10 +74,34 @@ $( '#element' ).searchable({
     show          : function( elem ) {
         elem.fadeIn(50);
     },
-    searchType    : 'fuzzy'
+    searchType    : 'fuzzy',
+    onSearchActive : function( elem, term ) {
+        elem.show();
+    },
+    onSearchEmpty: function( elem ) {
+        elem.hide();
+    },
+    onSearchFocus: function() {
+        $( '#feedback' ).show().text( 'Type to search.' );
+    },
+    onSearchBlur: function() {
+        $( '#feedback' ).hide();
+    },
+    clearOnLoad: true
 });
 ```
 
+## Changelog
+
+**Version 1.0.0:**
+
+- Initial release.
+
+**Version 1.1.0:**
+
+- Added some events that allow you to call custom functions during the search lifecycle: onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur (view the [configuration](#configuration) for more information).
+- Added the `clearOnLoad` setting which allows you to clear the search input on page load / refresh.
+
 ## Contributing & Issues
 
 Please feel free to submit any issues or pull requests, they are more then welcome. When submitting an issue, please specify the version number and describe the issue in detail so that it can be solved as soon as possible!

bower.json

@@ -1,13 +1,13 @@
 {
   "name": "jquery-searchable",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "homepage": "https://github.com/stidges/jquery-searchable",
   "authors": [
     "Stidges <[email protected]>"
   ],
   "description": "Tiny, fast jQuery plugin to search through elements as you type.",
   "main": [
-    "dist/jquery.searchable-1.0.0.min.js",
+    "dist/jquery.searchable-1.1.0.min.js",
     "jquery.searchable.js"
   ],
   "keywords": [

jquery.searchable.js

@@ -17,8 +17,21 @@
             evenRow: { },
             hide: function( elem ) { elem.hide(); },
             show: function( elem ) { elem.show(); },
-            searchType: 'default'
-        };
+            searchType: 'default',
+            onSearchActive: false,
+            onSearchEmpty: false,
+            onSearchFocus: false,
+            onSearchBlur: false,
+            clearOnLoad: false
+        },
+        searchActiveCallback = false,
+        searchEmptyCallback = false,
+        searchFocusCallback = false,
+        searchBlurCallback = false;
+
+    function isFunction(value) {
+        return typeof value === 'function';
+    }
 
     function Plugin( element, options ) {
         this.$element   = $( element );
@@ -33,10 +46,18 @@
             this.$search      = $( this.settings.searchField );
             this.matcherFunc  = this.getMatcherFunction( this.settings.searchType );
 
+            this.determineCallbacks();
             this.bindEvents();
             this.updateStriping();
         },
 
+        determineCallbacks: function() {
+            searchActiveCallback = isFunction( this.settings.onSearchActive );
+            searchEmptyCallback = isFunction( this.settings.onSearchEmpty );
+            searchFocusCallback = isFunction( this.settings.onSearchFocus );
+            searchBlurCallback = isFunction( this.settings.onSearchBlur );
+        },
+
         bindEvents: function() {
             var that = this;
 
@@ -46,6 +67,19 @@
                 that.updateStriping();
             });
 
+            if ( searchFocusCallback ) {
+                this.$search.on( 'focus', this.settings.onSearchFocus );
+            }
+
+            if ( searchBlurCallback ) {
+                this.$search.on( 'blur', this.settings.onSearchBlur );
+            }
+
+            if ( this.settings.clearOnLoad === true ) {
+                this.$search.val( '' );
+                this.$search.trigger( 'change' );
+            }
+
             if ( this.$search.val() !== '' ) {
                 this.$search.trigger( 'change' );
             }
@@ -72,7 +106,13 @@
                 this.$searchElems.css( 'display', '' );
                 this.updateStriping();
 
+                if ( searchEmptyCallback ) {
+                    this.settings.onSearchEmpty( this.$element );
+                }
+
                 return;
+            } else if ( searchActiveCallback ) {
+                this.settings.onSearchActive( this.$element, term );
             }
 
             elemCount = this.$searchElems.length;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "jquery.searchable",
   "title": "jQuery Searchable",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Tiny, fast jQuery plugin to search through elements as you type.",
   "main": "jquery.searchable.js",
   "scripts": {},