Question

The title is a guess as to what is going wrong with my script:

This is in my global.js script:

alert(search.getLabelsNames(); //alerts as undefined.
$('#search').autocomplete({
    source: function( request ) {
        search.getLabelsNames();
    },
    minLength:1
});

This is in my functions.js script:

var search;
window.search = {
    getLabelsNames:function( search ) {
        $.ajax({
            url : '../db_scripts/get_labels_names.php',
            type: "POST",
            data: { id: search }, //this defaults to nothing. not a problem
            success : function( data ) {
                var dataObj = jQuery.parseJSON( data );
                $.each(dataObj, function() {
                    alert(this.name);
                    return this.name;
                })
            }
        });
    }
}

In the each function, this.name, returns every one of the label names correctly from the database. But when I call it from globals.js, it returns as undefined. If I return the number 1, the search.getLabelsNames() alerts 1.. so it has no problem finding the global function.

what is wrong with this script and why can’t global.js find the this.name that is being returned?

Answer 1

You have two problems:

1. You cannot return data from a jQuery.each callback. The return value indicates whether to stop the iteration or not. From the documentation:

   We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.

2. You cannot return data from an Ajax callback. Ajax is asynchronous, which means in your case that getLabelsNames returns before the response is retrieved and processed.

Luckily, the autocomplete plugin accepts a function as source. You are already using it, but not correctly. Make it accept the second argument, which is a callback. From the documentation:

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

• A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".

• A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It’s important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

So what you have you have to do is passing this callback along to getLabelsNames so that it can be called in the success method of the Ajax call:

$('#search').autocomplete({
    source: function(request, callback) {
        // pass the callback along
        search.getLabelsNames(request.term, callback);
    },
    minLength:1
});

window.search = {
    getLabelsNames:function(search, callback) { // accept callback as argument
        $.ajax({
            url : '../db_scripts/get_labels_names.php',
            type: "POST",
            data: { id: search }, //this defaults to nothing. not a problem
            success : function( data ) {
                // format the data
                data = $.map(jQuery.parseJSON(data), function(obj) {
                    return obj.name;
                });
                // pass the data to the callback
                callback(data);
            }
        });
    }
}

Note that I use jQuery.map ^[docs] here, where returning a value form the callback has a different meaning. Don’t confuse it with jQuery.each.