How do you send an ajax request every time that a form input field changes?

Question

For example, there is an input field. Every time a user types a key into that field, it sends an AJAX request with whatever text is currently in that input, and does something with it. I've looked into the change and keyup functions in Jquery, but when I try them in Jsfiddle they don't do anything. Is there a standard way of doing this type of operation? I know its common for validations and stuff.

<form>
    <input id="test" type='text' >
    <input type="submit" value="asdf">
</form>

$('input').on("change",(function(e){
    alert("Hello");
});

The effect I am going for is like this game www.sporcle.com/games/g/nflteams#

You can type in any text and if its within the set of correct answers then the table will update to show that answer. You never have to submit. How do you suppose they achieved this effect?

It seemed to me like they must be querying the database every time a user enters a key, to see if it is a correct answer. If it is they update the table to display the answer. What are other ways to do this?

Answer 1

sending a request on each change is just bad, delay the ajax on the last change

var changeTimer = false;

$("your inputs").on("your change event",function(){
        if(changeTimer !== false) clearTimeout(changeTimer);
        changeTimer = setTimeout(function(){
            /* your ajax here */
            changeTimer = false;
        },300);
});

Answer 2

I'd probably do something similar to this. you'd have to add some extra code to handle dropdowns, but the idea is the same.

$('form input').keyup(function () {
    $.ajax({
      type: "POST",
      url: url,
      data: data,
      success: success,
      dataType: dataType
    });
});

Answer 3

Just make an $.ajax() call every time the change event is fired! Like so:

$(document).on('keydown','input',function(){
    $.ajax({
        // options here
    });
});

Whilst the above will help achieve what you want, I must advise that it is not great practice to fire off constant AJAX requests as this can put a huge load on the server if you have a lot of traffic. You would be better off either validating every n seconds, or validating client side, or validating on submission...

UPDATE

It appears you do not want to catch the change event, you would like to know when anything is entered. Resultantly, I have changed my code to catch the keydown event. This will fire whenever a key is pressed down whilst focused on an input.