views:

599

answers:

4

I have a textarea where people enter some text (naturally), and I want to make it so that an AJAX request is made every now and then to get some suggestions regarding what the textarea is about (like stack overflow's Related Questions, but for a textarea, not a text input). The problem is that I can't do an AJAX request at every keypress (it'd be useless and very resource consuming), and I am not sure what would be the most efficient way to do it (every X words? every X seconds? or something else?).

What would be the best way to go about doing this?

Thank you in advance.

A: 

If you're interested in jQuery solutions, jQuery Suggest is a good implementation.

No sense reinventing the wheel every time.

Gabriel Hurley
This doesn't work for me, as I don't want to update the textarea or anything with the suggestions made. I just want to make an AJAX request to get the contents of another element in the page, every X keystrokes, or every X seconds the user is typing, or something. Just wondering what would be the most efficient option.
Bruno De Barros
+1  A: 

I would personally use a setInterval that would monitor the textarea for changes and only perform AJAX callbacks when it detects a change is made. every second should be fast and slow enough.

barkmadley
This requires setInterval to run forever. Tim's solution is much more elegant, only running when someone is actually interacting with the textbox.
Gabriel Hurley
run forever until the page is unloaded. Also if you would like to provide some feedback as the user is typing my solution is better since it has the chance to send a request if the user is typing faster than one key per second. I'm not saying Tim's solution isn't elegant, but that in some cases it is not the solution depending on the application.
barkmadley
+9  A: 

You could combine a keypress event handler with setTimeout so that you send an Ajax request a set amount of time after a keypress, cancelling and restarting the timer if another keypress occurs before the timer finishes. Assuming you have a textarea with id 'myTextArea' and an Ajax callback function called doAjaxStuff:

function addTextAreaCallback(textArea, callback, delay) {
    var timer = null;
    textArea.onkeypress = function() {
        if (timer) {
            window.clearTimeout(timer);
        }
        timer = window.setTimeout( function() {
            timer = null;
            callback();
        }, delay );
    };
    textArea = null;
}

addTextAreaCallback( document.getElementById("myTextArea"), doAjaxStuff, 1000 );
Tim Down
This is the generally accepted "right" way to do this. Well said.
Gabriel Hurley
Thanks Tim, brilliant solution :D
Bruno De Barros
use onkeyup if you want to be able to capture backspace key events.
barkmadley
@barkmadley: that's fine if you don't want to be able to prevent its default action. You can capture backspace key events reliably in a keypress handler and prevent the default action.
Tim Down
A: 

Another alternative is to use a small jQuery plugin called bindWithDelay. It uses the same setTimeout technique that the accepted answer has, but handles the timeouts transparently so your code is a little easier to read. The source code can be seen on github.

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000)
Brian Grinstead