Duplicate keyup events with column filtering

carteriii

Let me start by saying this may be a more general javascript or jquery issue. When using Firebug to look at XHR calls with server-side processing, I noticed that column filtering seems to be happening twice for each keystroke. I decided to take the DataTables example for column filtering (in examples/api/multi_filter.html) and found that the same behavior exists there, even though it is just client-side filtering. The net effect seems to be an unnecessary duplication of all filtering for each & every character that is typed into an input field for column filtering.

There are many ways to see this by inserting some command into the code which binds the keyup function to the code which executes fnFilter(). In the example below, I simply added a line to print the Firebug's console, though you can also insert a simple alert() as well.

[code]
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
console.log('keyup');
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
[/code]

Can someone explain what's happening here? I'm using the DataTables 1.7.1 source which is packaged with jquery 1.4.2. As I said above, I don't believe this is a DataTables bug, but the keyup binding seems to work ok otherwise. For what it's worth, I also ran Alan's Visual Event which only shows one icon for the keyup binding (I thought perhaps it was being bound twice, but I don't know how else to check for that).

carteriii

I figured it out. keyup is called twice whenever the shift key or caps lock is pressed. This means that filtering on a capital letter will generate two calls to fnFilter in the default example.

I added an event parameter to the function declaration and was then able to examine the keycode to see what was happening. For example, pressing the shift key generates a keyup event with keyCode==16. I'm not sure if this is the best solution, but I then added a line within the function that just returns if the keyCode is less than 20:
[code]
$("tfoot input").keyup( function (event) {
if (event.keyCode <= 20) { return; }
....
[/code]

carteriii

OK, that wasn't the best. keyCode==8 is backspace, so checking for anything less than 20 is a bad move. So, be more precise than my example above, at least eliminating the shift key.