Jquery Search Auto Complete not call on first ajax load

Question

I want to put autocomplete on my site when user input atleat three characters in input box. I m using autocomplete.js plugin for this. What im doing is on keyup, ajax call send to a url which return all the search results in a form of an array. Then we call our autoComplete.Set("mygroup1", srvcsCitiesSafe, "newPopupStyle"); $("#CAT_Custom_283923").trigger('keyup');

The Problem is that it does not show results on first keyup ajax call. but at second ajax call and son it work fine. Can anybody tell me what is happening... here is the url of my site http://dbtrialsite.businesscatalyst.com/ and the auto complete textbox field is Suburb / City:

Following is my code

$(document).ready(function() {

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

        var mystring = $('#CAT_Custom_283923').val();    

        if (mystring.length == 2) {
            console.log(mystring);
            console.log(mystring.length);
            console.log("Lenght is greater than 2");

            var srvcsCitiesSafe=[];
            var srvcsPCSafe=[];

            var dataString = 'CAT_Custom_283923='+ $('#CAT_Custom_283923').val()+
                '&CAT_Custom_284431='+$('#CAT_Custom_284431').val() ;

            $.ajax({
                type: "POST",
                url: 'http://dbtrialsite.businesscatalyst.com/Default.aspx?CCID=17248&FID=100351&ExcludeBoolFalse=True&PageID=9350053',

                data: dataString,

                beforeSend: function () {
                    //put loader here, or hide something    
                    console.log('Loading...');
                },
                success: function (response) {

                    console.log('Ok Results Loaded');

                    var srvcs_json = [];
                    mydata=$(response);

                    $(".srvcs", mydata).each(function() {
                        var myString=$(this).html();
                        srvcs_json.push( jQuery.parseJSON( myString ) );
                    });


                    var srvcsCities =[];
                    var srvcsPC =[];
                    for (var i=0; i < srvcs_json.length; i++) {
                        srvcsCities[i] = srvcs_json[i]['city'];
                        srvcsPC[i] = srvcs_json[i]['postcode'];
                    }

                    srvcsCitiesSafe = eliminateDuplicates(srvcsCities);
                    srvcsPCSafe     = eliminateDuplicates(srvcsPC);
                },
                complete: function () {
                    //calling autofill function
                    console.log("auto called");
                    autoComplete.Set("mygroup1", srvcsCitiesSafe, "newPopupStyle");
                    $("#CAT_Custom_283923").trigger('keyup');
                }

            });    //end ajax call
        }

    });
////////////////////////////////////////////////////////////////////////////////////

});

Answer 1

Testing your web service I found an issue. After the first ajax call the autocomplete isn't shows the content, but it's there. Then while I was debuging the JavaScript code and put the focus on the input the options were shown. Maybe, there's a bug on this autocomplete version. To "solve" your problem I did this:

$.ajax({
type: "POST",
url: 'http://dbtrialsite.businesscatalyst.com/Default.aspx?CCID=17248&FID=100351&ExcludeBoolFalse=True&PageID=9350053',

data: dataString,

beforeSend : function() {
    //put loader here, or hide something    
    console.log('Loading...');
    $('#ajax-loader').show();
},

success: function(response){
    console.log('Ok Results Loaded');
    $('#ajax-loader').hide();

    var srvcs_json = [];
    mydata=$(response);

    $(".srvcs", mydata).each(function(){
        var myString=$(this).html();
        srvcs_json.push( jQuery.parseJSON( myString ) );
    });

    var srvcsCities =[];
    var srvcsPC =[];
    for (var i=0; i < srvcs_json.length; i++) {
        srvcsCities[i] = srvcs_json[i]['city'];
        srvcsPC[i] = srvcs_json[i]['postcode'];
    }

    srvcsCitiesSafe = eliminateDuplicates(srvcsCities);
    srvcsPCSafe     = eliminateDuplicates(srvcsPC);

    console.log("auto called");
    autoComplete.Set("mygroup1", srvcsCitiesSafe, "newPopupStyle");
    $("#CAT_Custom_284431").focus();
    $("#CAT_Custom_283923").focus();
}
});//end ajax call

I hope I have helped you.