Buffered/delayed ajax requests/keystrokes using JavaScript and JQuery Datatables
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 th开发者_如何学Pythone 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!
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
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
精彩评论