Jquery AutoComplete - not getting return values from functon

Question

I'm sure there are a million things wrong with my coding...

However everything works EXCEPT - the autoComplete.

I can't seem to return values from my searchResults function.

I want to return the string.

Right now

  alert("t: " + availableTags);

works BUT

  alert("x: " + availableTags);

does not

Neither return lines return the values.

What am I doing wrong?

$(function(){
    //$("#searchButton").click(function(){
    //$("input").keyup(function(e){

    var availableCompanies = searchResults('CompanyName',false);
    var availableLocations = searchResults('Location',false);
    $("input[id^='CompanyName']").keyup(function(){ 
        //alert("CN");  
        searchResults('CompanyName',true);          
    });//$("input[id=CompanyName]").keyup(function(e){  
    $("input[id^='Location']").keyup(function(){    
        searchResults('Location',true);         
    }); 
    $("input[id^='serving']").keyup(function(){ 
        searchResults('serving',true);          
    });
    $( "#CompanyName" ).autocomplete({
        source: availableCompanies
    });
    $( "#Location" ).autocomplete({
        source: availableLocations
    });
    alert(availableCompanies);

})//$(function(){})  


function searchResults(which,populate,availableTags){
    //clear search results
    $("#searchResults").text("");
    //clear available tags
    //jqxAlert.alert(which);
    //var sSearch = $("#search").val();
    var sSearch =  $("input[id='"+which+"']").val();
    var url = "search.asp?" + which + "=" + sSearch;
    //alert(url);
    var availableTags = "";

    $.get(url, function(data){
        //$('#searchResults').html(data);
        var uid =""
        var company = ""; 
        var location = "";
        var phone1 = "";
        var phone2 = "";
        var phone3 = "";
        var html = "";
        var sql = "";
        var i = 1;


        if ($('company',data).text() == ""){
            $("#searchResults").html("<tr><td>Sorry, there are no results.</td></tr>");
        };

        $.each($('company',data),function(index, el) {  
            uid = $(this).find('uid').text();
            companyName = $(this).find('CompanyName').text();
            location = $(this).find('location').text();
            //phone1 = $(this).find('phone1').text();
            //phone2 = $(this).find('phone2').text();
            //phone3 = $(this).find('phone3').text();
            //serving = $(this).find('serving').text();
            //sql = "<br />" + $(this).find('sql').text() + "<br />";

            //alert(which == "CompanyName");
            if (which == "CompanyName"){
                //availableTags = availableTags + companyName;
                if (availableTags.indexOf(companyName) < 0){
                    if (availableTags == "") {
                        availableTags = companyName;
                    }else{
                        availableTags = availableTags + "," + companyName;
                    }
                }               
            }
            if (which == "Location"){
                if (availableTags.indexOf(Location) < 0){
                    if (availableTags == "") {
                        availableTags = Location;
                    }else{
                        availableTags = availableTags + "," + Location;
                    }
                }
            }   

            if (sSearch != ""){
                if (i % 2 == 0){
                    html = '<div id="c_' + uid + '" class="bgGrey">';
                }else{
                    html = '<div id="c_' + uid + '" class="bgWhite">';
                }
                html = html + "<tr>";
                html = html + "<td><b>&larr;</b>" + companyName + " (" + location + ")</td>";

                //html = html + company + " " + location ;
                html = html + "</tr>";
                html = html + "</div>";

                //$("#searchResults").append(i + ' ' +x + ' ' + y + ' ' + sql + html);
                $("#searchResults").append(html);
            }
            i++;
        }); //$.each($('company',data),function(index, el) {


        if (populate){
            PopulateFields();       
        }else{
            alert("t: " + availableTags);
            return "test";  
        }

    }).error(function() {
        $("#searchResults").html("<tr><td>Results could not be retrieved. Alert T. McDermott</td></tr>");
    }); //$.get(url, function(data){    
    alert("x: " + availableTags);
    return availableTags;   
}

hm.. i quick scanned your code and think that `alert("t: " + availableTags);` locates in success callback of get request, but `alert("x: " + availableTags);` doesnt and `alert("x: " + availableTags);` called early than get request complete. You should place `alert("x: " + availableTags);` into success callback of get request. — Alex, Dec 21 '12 at 21:37
Thanks. I was able to get the alert in the right place... but still having trouble because of the asynch op. — tree, Dec 26 '12 at 18:18

score 1 · Accepted Answer · answered Dec 21 '12 at 21:39

You're returning the value outside the ajax request, so the portion in $.get() is still getting data from the server. You can't operate like this since it's an asynchronous operation. You have 2 main options:

Make it synchronous (bad, this locks up most browsers)
Play nice with async behavior, by calling the next function when done.

What you should be doing is calling someOtherFunction(availableTags); at the end of your $.get(url, function(data){ }) function, where it has the data and can pass it along to whatever needs it.

What you're looking at is that the function(data) { } executes once the server has sent the data back to the browser and you can then process it, so you want to proceed from there.

Thanks... I rewrote my autocomplete call to look like this: `$( "#Location" ).autocomplete({ source: function(request, response) { $.ajax({ url: "searchAutoComplete.asp?Location=all", data: { term: $("#Location").val()}, dataType: "TEXT", type: "POST", success: function(data){ response(data); //response(eval('[' + data + ']'); //alert(data); } }); }, minLength: 2 });` — tree, Dec 26 '12 at 18:18

Jquery AutoComplete - not getting return values from functon

1 Answers1

Linked