Added filter_liveSearch option

docs/example-widget-filter.html

@@ -58,6 +58,10 @@
 			// css class applied to the table row containing the filters & the inputs within that row
 			filter_cssFilter : 'tablesorter-filter',
 
+			// add custom filter elements to the filter row
+			// see the filter formatter demos for more specifics
+			filter_formatter : null,
+
 			// add custom filter functions using this option
 			// see the filter widget custom demo for more specifics on how to use this option
 			filter_functions : null,
@@ -69,6 +73,9 @@
 			// Set this option to false to make the searches case sensitive
 			filter_ignoreCase : true,
 
+			// if true, search column content while the user types (with a delay)
+			filter_liveSearch : true,
+
 			// jQuery selector string of an element used to reset the filters
 			filter_reset : 'button.reset',
 
@@ -76,6 +83,10 @@
 			// every character while typing and should make searching large tables faster.
 			filter_searchDelay : 300,
 
+			// if true, server-side filtering should be performed because client-side filtering will be disabled, but
+			// the ui and events will still be used.
+			filter_serversideFiltering: false,
+
 			// Set this option to true to use the filter to find text from the start of the column
 			// So typing in "a" will find "albert" but not "frank", both have a's; default is false
 			filter_startsWith : false,
@@ -186,14 +197,16 @@ $(function(){
 				<li><code>filter_childRows : false</code> - if true, filter includes child row content in the search.</li>
 				<li><code>filter_columnFilters : true</code> - if true, a filter will be added to the top of each table column.</li>
 				<li><code>filter_cssFilter : 'tablesorter-filter'</code> - css class name added to the filter row & each input in the row.</li>
+				<li><code>filter_formatter : null</code> - add custom filter elements to the filter row.</li>
 				<li><code>filter_functions : null</code> - add custom filter functions using this option.</li>
 				<li><code>filter_hideFilters : false</code> - if true, filters are hidden initially, but can be revealed by clicking on the filter icon.</li>
 				<li><code>filter_ignoreCase : true</code> - if true, make all searches case-insensitive.</li>
+				<li><code>filter_liveSearch : true</code> - if true, search column content while the user types (with a delay).</li>
 				<li><code>filter_reset : null</code> - jQuery selector string of an element used to reset the filters.</li>
 				<li><code>filter_searchDelay : 300</code> - typing delay in milliseconds before starting a search.</li>
+				<li><code>filter_serversideFiltering : false</code> - if true, filter will be done server-side. The client-side filtering will be disabled, but the ui and events will still be used..</li>
 				<li><code>filter_startsWith : false</code> - if true, filter start from the beginning of the cell contents.</li>
 				<li><code>filter_useParsedData : false</code> - filter all data using parsed content.</li>
-				<li><code>filter_serversideFiltering : false</code> - if true, server-side filtering should be performed because client-side filtering will be disabled, but the ui and events will still be used.</li>
 			</ul>
 		</div>
 

docs/index.html

@@ -298,12 +298,13 @@
 			<ul>
 				<li><a href="example-widget-filter.html">basic</a> (v2.0.18)</li>
 				<li><a href="example-widget-filter-custom.html">custom</a> (v2.3.6)</li>
-				<li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="">HTML5 Elements</a>) <span class="tip"><em>New</em></span> v2.7.7.</li>
+				<li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="">HTML5 Elements</a>) (v2.7.7).</li>
 			</ul>
 		</li>
 		<li><a href="example-widget-grouping.html">Grouping rows Widget</a> <span class="tip"><em>New</em></span> v2.8.</li>
 		<li><a href="example-widget-resizable.html">Resizable Columns widget</a> (v2.0.23.1; <span class="tip"><em>Updated</em></span> v2.8.3)</li>
 		<li><a href="example-widget-savesort.html">Save sort widget</a> (v2.0.27)</li>
+		<li><a href="example-widget-scroller.html">Scroller widget</a> <span class="tip"><em>New</em></span> v2.9.</li>
 		<li><a href="example-widget-sticky-header.html">Sticky header widget</a> (v2.0.21.1)</li>
 		<li>UITheme widget:
 			<ul>
@@ -354,7 +355,7 @@
 	<ul>
 		<li><a href="example-widget-ui-theme.html">UITheme widget</a> (v2.0.9)</li>
 		<li><a href="example-option-render-header.html">Modifying the Header during rendering.</a></li>
-		<li><a href="example-option-render-template.html">Modifying the Header using a template</a>. <span class="tip"><em>New!</em></span> v2.7</li>
+		<li><a href="example-option-render-template.html">Modifying the Header using a template</a> (v2.7)</li>
 	</ul>
 
 	<br/>
@@ -544,7 +545,7 @@
 				<td><a href="#" class="toggle2">cssIcon</a></td>
 				<td>String</td>
 				<td>"tablesorter-icon"</td>
-				<td>The CSS style used to style the header cell icon. <span class="tip"><em>Modified!</em></span> v2.7.
+				<td>The CSS style used to style the header cell icon (modified v2.7).
 					<div class="collapsible"><br>
 						As of v2.4, an &lt;i&gt; element, with this class name, is automatically appended to the header cells. To prevent the plugin from adding an &lt;i&gt; element to the headers, set the <code>cssIcon</code> option to an empty string.<br>
 						<br>
@@ -743,7 +744,7 @@
 				<td><a href="#" class="toggle2">headerTemplate</a></td>
 				<td>String</td>
 				<td>'{content}'</td>
-				<td>This is a template string which allows adding additional content to the header while it is being built. <span class="tip"><em>New!</em></span> v2.7.
+				<td>This is a template string which allows adding additional content to the header while it is being built (v2.7).
 					<div class="collapsible"><br>
 						This template string has two modifying tags: <code>{content}</code> and <code>{icon}</code>.<br>
 						<code>{content}</code> will be replaced by the current header HTML content.<br>
@@ -814,7 +815,7 @@
 				<td>Function</td>
 				<td>null</td>
 				<td>
-					This function is called after the template string has been built, but before the template string is applied to the header and before the <code>onRenderHeader</code> function is called. <span class="tip"><em>New!</em></span> v2.7.
+					This function is called after the template string has been built, but before the template string is applied to the header and before the <code>onRenderHeader</code> function is called (v2.7).
 					<div class="collapsible">
 					<br>
 					The <code>onRenderTemplate</code> function receives a column index and template string parameters. The template string, from the <a href="#headertemplate"><code>headerTemplate</code> option</a>, will already have the <code>{icon}</code> and <code>{content}</code> tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it. Here is an example:
@@ -1604,7 +1605,7 @@ $(function(){
 				<td>Object</td>
 				<td>null</td>
 				<td>
-					Filter widget: This option allows you to add custom controls within the filter widget row. <span class="tip"><em>New!</em> v2.7.7</span><br>
+					Filter widget: This option allows you to add custom controls within the filter widget row (v2.7.7).<br>
 					<div class="collapsible">
 					<br>
 					A new file has been included named "jquery.tablesorter.widgets-filter-formatter.js". It includes code to add jQuery UI and HTML5 controls via the <a href="#widget-filter-formatter"><code>filter_formatter</code></a> option.<br>
@@ -1796,6 +1797,20 @@ $(function(){
 				<td><a href="example-widget-filter.html">Example</a></td>
 			</tr>
 
+			<tr id="widget-filter-livesearch">
+				<td><a href="#" class="toggle2">filter_liveSearch</a></td>
+				<td>Boolean</td>
+				<td>true</td>
+				<td>
+					Filter widget: Search the column content as the user types, with the delay set in the <code>filter_searchDelay</code> option <span class="tip"><em>New!</em></span> v2.9.
+					<div class="collapsible">
+					<br>
+					This option allows you to disable the live search behavior so that a filter is only applied when the user presses enter (or uses escape to clear and cancel the search).
+					</div>
+				</td>
+				<td></td>
+			</tr>
+
 			<tr id="widget-filter-reset">
 				<td><a href="#" class="toggle2">filter_reset</a></td>
 				<td>String</td>
@@ -2820,7 +2835,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
 
 			<tr id="filterreset">
 				<td><a href="#" class="toggle2">filterReset</a></td>
-				<td>Trigger the filter widget to reset the search criteria. <span class="tip"><em>New!</em></span> v2.7.7.
+				<td>Trigger the filter widget to reset the search criteria (v2.7.7).
 					<div class="collapsible">
 						If you are using the <code>filter_formatter</code> option to add custom input elements, this function may not work on those columns. Please refer to the <code>filter_formatter</code> section for more details.
 						<pre class="prettyprint lang-javascript">$(function(){
@@ -2834,7 +2849,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
 
 			<tr id="savesortreset">
 				<td><a href="#" class="toggle2">saveSortReset</a></td>
-				<td>Trigger the saveSort widget to clear any saved sorts for that specific table. <span class="tip"><em>New!</em></span> v2.7.11.
+				<td>Trigger the saveSort widget to clear any saved sorts for that specific table (v2.7.11).
 					<div class="collapsible">
 						<pre class="prettyprint lang-javascript">$(function(){
   $('button').click(function(){
@@ -2853,7 +2868,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
 		<tbody>
 			<tr id="pagesize">
 				<td><a href="#" class="toggle2">pageSize</a></td>
-				<td>Trigger the pager to change the page size. <span class="tip"><em>New!</em></span> v2.7.4.
+				<td>Trigger the pager to change the page size (v2.7.4).
 					<div class="collapsible">
 						<pre class="prettyprint lang-javascript">$(function(){
   $('table').trigger('pageSize', 15);
@@ -2863,7 +2878,7 @@ or, directly add the search string to the filter input as follows:<pre class="pr
 			</tr>
 			<tr id="pageset">
 				<td><a href="#" class="toggle2">pageSet</a></td>
-				<td>Trigger the pager to change the current page. <span class="tip"><em>New!</em></span> v2.7.7.
+				<td>Trigger the pager to change the current page (v2.7.7).
 					<div class="collapsible">
 						<pre class="prettyprint lang-javascript">$(function(){
   $('table').trigger('pageSet', 3);

js/jquery.tablesorter.widgets.js

@@ -291,6 +291,7 @@ ts.addWidget({
 		filter_functions     : null,  // add custom filter functions using this option
 		filter_hideFilters   : false, // collapse filter row when mouse leaves the area
 		filter_ignoreCase    : true,  // if true, make all searches case-insensitive
+		filter_liveSearch    : true,  // if true, search column content while the user types (with a delay)
 		filter_reset         : null,  // jQuery selector string of an element used to reset the filters
 		filter_searchDelay   : 300,   // typing delay in milliseconds before starting a search
 		filter_startsWith    : false, // if true, filter start from the beginning of the cell contents
@@ -585,7 +586,7 @@ ts.addWidget({
 			})
 			.find('input.' + css).bind('keyup search', function(e, filter){
 				// ignore arrow and meta keys; allow backspace
-				if (e.type === 'keyup' && ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40))) { return; }
+				if (e.type === 'keyup' && ((e.which < 32 && e.which !== 8) || (e.which >= 37 && e.which <=40) || (e.which !== 13 && !wo.filter_liveSearch))) { return; }
 				// skip delay
 				if (typeof filter !== 'undefined' && filter !== true){
 					checkFilters(filter);