Question

The variable ajaxdata is modified within the success function, if that hasn’t been done yet, I would like to wait 2 seconds, then continue without it.

The use case is for a jqueryui autocomplete field. The autocomplete source is an ajax request, but if the user types quickly, and exits the field before the list loads, the field remains unset. Using the ‘change’ event on the autocomplete I check if the user entered a valid option without selecting it, but this doesn’t work if the source hasn’t loaded when the change event fires. So I would like to put a delay in the change function which waits, if the source (stored in the variable ‘ajaxdata’) is empty.

code:

input.autocomplete({
            source: function (request, response){
                    $.ajax(
                        {
                            type: "GET",
                            url: "/some/url",
                            dataType: "json",
                            success: function(data){
                                response($.map(data,function(item){
                                    return{
                                        label: item.label,
                                        value: item.value
                                    }
                                }));
                                ajaxdata = data;
                            }
                        }
                    );
                    // ajaxopts = ajaxsource(request,response,ajaxurl,xtraqry)
                },                   
            change: function(event, ui) {
                if (!ui.item) {
                    // user didn't select an option, but what they typed may still match
                    var enteredString = $(this).val();
                    var stringMatch = false;
                    if (ajaxdata.length==0){
                        ///  THIS IS WHERE I NEED A 2 SECOND DELAY
                    }
                    var opts = ajaxdata;
                    for (var i=0; i < opts.length; i++){
                        if(opts[i].label.toLowerCase() == enteredString.toLowerCase()){
                            $(this).val(opts[i].label);// corrects any incorrect case
                            stringMatch = true;
                            break;
                        }
                    }
            }
            },
        });

Edit:

To be more specific about the problem: This delay needs to be conditional. Meaning that if the data is already loaded (either because it came from a static source, or from an earlier ajax call) I do not want to have a delay.

Answer 1

If I’m understanding you properly, I think you just want to check and see if ajaxdata has been populated; but if it hasn’t, only wait two more seconds and then just proceed without it.

Try this:

change: function(event, ui) {
    if (!ui.item) {
        // user didn't select an option, but what they typed may still match

        if (ajaxdata.length==0){
            ///  THIS IS WHERE I NEED A 2 SECOND DELAY

            //pass in 'this' so that you can use it
            setTimeout(function() {correctCase(this);}, 2000);
        }       
    }
}

. . . . .

function correctCase(inThis){       

    //I'm not sure what this variable does.  do you really need it???   
    var stringMatch = false;

    var enteredString = $(inThis).val();
    //you still want to be sure that ajaxdata is not empty here
    if (ajaxdata.length==0){
        var opts = ajaxdata;
        for (var i=0; i < opts.length; i++){
            if(opts[i].label.toLowerCase() == enteredString.toLowerCase()){
                $(inThis).val(opts[i].label);   // corrects any incorrect case
                stringMatch = true;  //this variable doesn't seem to do anything after this???
                break;
            }
        }
    }
}