Buffered/delayed ajax requests/keystrokes using JavaScript and JQuery Datatables

Question

I am currently prototyping an enterprise web app which will include a quick search screen. This screen uses JQuery and Datatables to provide a tabular view of the search results. Searches are performed based on matches to string entered in a text field. Each time a key is pressed, a new AJAX request is sent back to a servlet, the search is performed (across a large database) and results are returned via JSON to be updated on the table.

The search on the database is a costly operation. A lot of times when a user is typing, say, a name, they would type a number of letters in quick succession. This will result in multiple searches being triggered in the backend, sometimes unnecessarily.

I was wondering if there is a way of cleverly buffering those request. For example, if a user is typing "Jonathan", do not send a request for J, Jo, Jona, Jonath, ... if they are all typed within a time limit of each other, and only send the request when there is a sufficient gap in typing, i.e. when the letter n at the end is typed.

I know this will cost a slight delay but it may be a worthy compromise.

Do you think think this makes sense? Is there an existing pattern/library for such operations? Does it cause usability issues that I haven't thought of?

Greatly appreciate your opinions!

Answer 1

Just in case someone looking at a similar problem: after Spike's comment I checked datatables plugins and there's something that does exactly what I wanted above: see fnSetFilteringDelay

Answer 2

You could use the jquery-ui framework's autocomplete function, which has a delay option that does exactly what you're looking for.

http://jqueryui.com/demos/autocomplete/#option-delay