jQuery DataTables: Delay search until 3 characters been typed OR a button clicked jQuery DataTables: Delay search until 3 characters been typed OR a button clicked jquery jquery

jQuery DataTables: Delay search until 3 characters been typed OR a button clicked


Solution for version 1.10 -

After looking here for a complete answer and not finding one, I've written this (utilizing code from the documentation, and a few answers here).

The below code works to delay searching until at least 3 characters are entered:

// Call datatables, and return the API to the variable for use in our code// Binds datatables to all elements with a class of datatablevar dtable = $(".datatable").dataTable().api();// Grab the datatables input box and alter how it is bound to events$(".dataTables_filter input")    .unbind() // Unbind previous default bindings    .bind("input", function(e) { // Bind our desired behavior        // If the length is 3 or more characters, or the user pressed ENTER, search        if(this.value.length >= 3 || e.keyCode == 13) {            // Call the API search function            dtable.search(this.value).draw();        }        // Ensure we clear the search if they backspace far enough        if(this.value == "") {            dtable.search("").draw();        }        return;    });


Note: This was for a much earlier version of data tables, please see this answer for jQuery datatables v1.10 and above.


This will modify the behaviour of the input box to only filter when either return has been pressed or there are at least 3 characters in the search:

$(function(){  var myTable=$('#myTable').dataTable();  $('.dataTables_filter input')    .unbind('keypress keyup')    .bind('keypress keyup', function(e){      if ($(this).val().length < 3 && e.keyCode != 13) return;      myTable.fnFilter($(this).val());    });});

You can see it working here: http://jsbin.com/umuvu4/2. I don't know why the dataTables folks are binding to both keypress and keyup, but I'm overriding both of them to stay compatible although I think keyup is sufficient.

Hope this helps!


Why not try this extended version of Stony's answer :)

var searchWait = 0;var searchWaitInterval;$('.dataTables_filter input').unbind('keypress keyup').bind('keypress keyup', function(e){    var item = $(this);    searchWait = 0;    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){        if(searchWait>=3){            clearInterval(searchWaitInterval);            searchWaitInterval = '';            searchTerm = $(item).val();            oTable.fnFilter(searchTerm);            searchWait = 0;        }        searchWait++;    },200);});

This will delay the search until the user has stopped typing.

Hope it helps.