JQuery autocomplete using php script as source

Question

I am using the following code for defining the source as a php script:

$("#fav_rides_select").autocomplete({
            source: "http://localhost/coaster/CoasterInsider/index.php?page=getRideAndParksJson&type=rides&keyword=test",
            minLength: 1,
            delay: 1000,
            select: function( event, ui ) { 
                        //window.location.href = ui.item.valuea;
                        alert(ui.item.label);
            }
            }).data( "autocomplete" )._renderItem = function( ul, item ) {
                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append( '<a><div class="autocompleteItemDiv"><div class="autocompleteImageDiv"><img src="' + item.image + '"></div><div class="autocompleteTextDiv">' + item.label + '<br/>' + item.description + '</div></div></a>' )
                    .appendTo( ul );
            };
    });

And no results are being shown, but when i explicitly typed the above url into browser, it's correctly showing the following output in browser:

 [ {label:"Alton Towers" , valuea:"http://alto1.com" , description:"Alton tower parks" ,image:"images/altontowerslogothumb.png"}, {label:"Animal Kingdom" , valuea:"http://alto2.com" , description:"Animal Ride" ,image:"images/animalkingdomlogothumb.png"}, {label:"Busch Garden" , valuea:"http://alto3.com" , description:"Jeorge Bush" ,image:"images/buschgardenslogothumb.png"}, {label:"Chessingona" , valuea:"http://alto4.com" , description:"Play chessy" ,image:"images/chessingonlogothumb.png"}, {label:"Disneyland Paris" , valuea:"http://alto5.com" , description:"Visit parisano disney" ,image:"images/disneylandparislogothumb.png"}, {label:"Epcota" , valuea:"http://alto6.com" , description:"Epcot park" ,image:"images/epcotlogothumb.png"}, {label:"Fujia" , valuea:"http://alto7.com" , description:"Fujiyama" ,image:"images/fujilogothumb.png"}, {label:"Gardland" , valuea:"http://alto8.com" , description:"Gards here" ,image:"images/gardalandlogothumb.png"} ];

Answer 1

As per the jQuery autocomplete documentation source can be String, Array, Callback (javascript function)

Probably you need this:

$("input").autocomplete({
  source: function(request, response) {
    $.ajax({
      url: "url",
      data: request,
      dataType: "json",
      method: "post",
      success: response
    }
  }
});