javascript - Large data set causing custom search box to lag jquery datatables -

when testing data table 60,000 rows , 6 columns (defer render turned on), encountered lag when typing in custom search box (not default search datatables provides). clarify, happening start type in "zuz" custom search box, after typing in "u", should take second appear , not appear instantaneous.

basically, current code has search , re-draw after each keyup event.

searchboxonkeyup: function(e) {     var table = this.getcurrenttable();     table.search($(e.target).val()).draw(); } 

i think what's happening table draws before next character input next character takes longer show in search box.

i've used built in search box , has no problem dealing 60,000 rows , showing input without lag. reason can't use default built in search box because ui design has search box in different location other controls next (ex: select , checkbox)

what have tried far throttling draw action:

var search_term = $(e.target).val();  var search = $.fn.datatable.util.throttle(     function ( search_term ) {           console.log("running search on ", search_term);           table.search( search_term ).draw();      },      2500 );  if (search_term.length > 3 || search_term.length === 0) {     search(search_term); } 

however, didn't solve problem because still run issue of input lag after first draw() gets called after 2.5 seconds.

short of having table draw after entire input has been typed, there workaround user input not lag due table having re-draw?

the workaround found based off of 1 of answers on post given xiaohouzi79: run javascript function when user finishes typing instead of on key up?

basically, wrapped search in function , use settimeout execute function after 500 miliseconds after user has finished typing input in search box.

here code:

// note: this.typing_timer declared in initialization code elsewhere searchboxonkeyup: function(e) {      var table = this.getcurrenttable();      var search_term = $(e.target).val();       var searchfunc = function() {           table.search(search_term).draw('page');           // rest of logic left out brevity      }       cleartimeout(this.typing_timer)      this.typing_timer = settimeout(searchfunc, 500) } 

search not kick in if user still typing because of our cleartimeout call resetting timer every time keyup event occurs.