Keypress delay when entering text in search box?

alexsherwood

Is there a way to delay the AJAX query when entering text into a the search box?

I am using server-side AJAX search, and an individual HTTP request is kicked off for each letter entered in the search box.

For example, if I type "glove" into the box, I get 5 searches, running synchronously:

g
gl
glo
glov
glove

Obviously, this is not good for performance.

Is there a way to add a delay of some sort - perhaps 2-3 seconds (or even require hitting "enter") to initiate search so that only a single AJAX request is kicked off for the completed string?

I know that for cached searches on the client, this is not needed (or desired). This specific setup only make sense for server-side AJAX requests.

I am using legacy 1.9.4.

Thanks for any help in advance.

HPB

You cannot with your version of datatables.

searchDelay got added it version 1.10.3

bindrid

It still can cause unneeded traffic. My solution was to remove the default handler and add a keydown and watch for the enter key, plus I put a search image button next to the search box.

alexsherwood

Thanks so much @HPB ! That did the trick. Updated to 1.10.3 and set the delay to 1200ms (1.2 secs) and it works perfectly. Cuts back on TONS of intermediate AJAX requests.

Appreciate the help very much!

alexsherwood

@bindrid - mind sharing your code snippet for that? Would love to have that option for the enter key as well.

Thanks!

allan

The next major version is going to update that option so that it uses a debounce method rather than a throttle. I had thought that a throttle would be used more, since it gives a halfway house to live filtering, but it seems that based on feedback that was the wrong decision.

There is actually a fnSetFilteringDelay legacy plug-in for 1.9.x which will do what you are looking for @alexsherwood.

Worth noting that 1.9.x isn't supported any more though.

Allan

bindrid

Here is some working code that goes before $('example').DataTable();

            $(document).on("preInit.dt", function () {
                var $sb = $(".dataTables_filter input[type='search']");
                // remove current handler
                $sb.off();
                // Add key hander
                $sb.on("keypress", function (evtObj) {
                    if (evtObj.keyCode == 13) {
                        $('#example').DataTable().search($sb.val()).draw();
                    }
                });
                // add button and button handler
                var btn = $("<button type='button'>Go</button>");
                $sb.after(btn);
                btn.on("click", function (evtObj) {
                    $('#example').DataTable().search($sb.val()).draw();
                });
            });

alexsherwood

@allan - thanks for the update, and thanks a ton for the awesome functionality. It's fantastic!

@bindrid - thanks for the snippet - we'll put it to use. Much appreciated!