Wait till user finish typing in input filed

[Pervez]

Hi,


Am trying to get some data from DB , here am checking whether username is registered or not , if he register am getting some data related to that user and displaying on window .

I want function to wait for untill user finish typing his username ,
then run the function , Below is my code ,

$(function (){  
        var minlength = 2;                        
        $("#username").keyup(function () {
        var that = this,
        value = $(this).val();          
        if (value.length >= minlength ) {
                $.ajax({                
                        type: "GET",
                        url: "Path_to_php",
                        data: {'username' : value},
                        dataType: "html",
                        success: function(data){
                                if (value==$(that).val()) {
                                        $("#content").append("<p>" + data + "</p>");
                                }
                                else {
                                        alert ("Username Not Registered");
                                }
                        }
                });
                }
        });
});

Here , when user start entering his name , that time only Function getting call for each char he entered

[niralsoni]

Its because you are invoking the "onKeyUp" event that the function call starts immediately.

Well, "OnKeyUp" is the right event, but how your code will come to know that user has finished entering the text ?

For that you need to track a specific key. If that key is hit, that means user has finished entering the text. Normally we call this specific key as the "Enter key".

So, onkeyup, you track which key was pressed. If its "Enter key", then only you start processing your code.

something like -

var key = event.which || event.keyCode;
if(key == 13) { // 13 is the keycode for enter key
// your piece of code here...
}

Hope it helps you out...

Regards,
Niral Soni

[Pervez]

Hey ,

Thank you for your time ,

I didn't how to do that ............

Please can you edit my code , Below is JSfiddle link

http://jsfiddle.net/ZvNFc/

[Old Pedant]

An easier way: Just use "onchange" instead of "onkeyup".

That is, when the browser detects the user has finished changing the field--when the user hits the TAB key or the ENTER key or mouse clicks to a different field *AND* the contents of the field have *changed*--*THEN* do your AJAX actions.

SO just change

        $("#username").keyup(function () {

to

        $("#username").change(function () {

[Pervez]

Thank You buddy