Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 16 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,8 @@ This plugin provides the following configuration options:
| 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`). |
| matcherFunction | `null` | A custom matcher function. Should return a function to be run against each `childSelector`. |
| matchOnElement | `false` | If `true`, the element identified by `selector` is provided to the matcher function. If `false`, jQuery `.text()` is called on it first. Useful if `matcherFunction` provided. |

### Example usage

Expand Down Expand Up @@ -89,7 +91,16 @@ $( '#element' ).searchable({
onSearchBlur: function() {
$( '#feedback' ).hide();
},
clearOnLoad: true
clearOnLoad: true,
matchOnElement: true,
matcherFunction: function(term) {
// this copies the logic of the plugin's default matcher, but matches on an element (rather than a text input) to demonstrate the `matchOnElement` option
term = $.trim(term).toLowerCase();
return function(column) {
return (column.text().toLowerCase().indexOf(term) !== -1);
};
}
}
});
```

Expand All @@ -104,6 +115,10 @@ $( '#element' ).searchable({
- 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.

**Version 1.2.0:**

- Added `matchOnElement` and `matcherFunction` options (IE version not updated).

## 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!
Expand Down
22 changes: 12 additions & 10 deletions jquery.searchable.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
/*!
* jQuery Searchable Plugin v1.0.0
* jQuery Searchable Plugin v1.2.0
* https://github.com/stidges/jquery-searchable
*
* Copyright 2014 Stidges
* Released under the MIT license
*/
;(function( $, window, document, undefined ) {

var pluginName = 'searchable',
defaults = {
selector: 'tbody tr',
Expand All @@ -22,7 +22,9 @@
onSearchEmpty: false,
onSearchFocus: false,
onSearchBlur: false,
clearOnLoad: false
clearOnLoad: false,
matchOnElement: false,
matcherFunction: null
},
searchActiveCallback = false,
searchEmptyCallback = false,
Expand All @@ -44,7 +46,7 @@
init: function() {
this.$searchElems = $( this.settings.selector, this.$element );
this.$search = $( this.settings.searchField );
this.matcherFunc = this.getMatcherFunction( this.settings.searchType );
this.matcherFunc = this.settings.matcherFunction || this.getMatcherFunction( this.settings.searchType );

this.determineCallbacks();
this.bindEvents();
Expand Down Expand Up @@ -100,7 +102,7 @@
},

search: function( term ) {
var matcher, elemCount, children, childCount, hide, $elem, i, x;
var matcher, elemCount, children, childCount, hide, $elem, i, x, elem_for_match

if ( $.trim( term ).length === 0 ) {
this.$searchElems.css( 'display', '' );
Expand All @@ -125,7 +127,8 @@
hide = true;

for ( x = 0; x < childCount; x++ ) {
if ( matcher( $( children[ x ] ).text() ) ) {
elem_for_match = this.settings.matchOnElement ? $(children[ x ]) : $(children[ x ]).text()
if (matcher(elem_for_match)) {
hide = false;
break;
}
Expand Down Expand Up @@ -181,10 +184,9 @@

$.fn[ pluginName ] = function( options ) {
return this.each( function() {
if ( !$.data( this, 'plugin_' + pluginName ) ) {
$.data( this, 'plugin_' + pluginName, new Plugin(this, options) );
}
$.removeData( this, 'plugin_' + pluginName) // this also `delete`s the old plugin var if there is one
$.data( this, 'plugin_' + pluginName, new Plugin(this, options) )
});
};

})( jQuery, window, document );
})( jQuery, window, document );