ソースをphpスクリプトとして定義するために、次のコードを使用しています。
$("#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 );
};
});
結果は表示されませんが、上記の URL をブラウザーに明示的に入力すると、ブラウザーに次の出力が正しく表示されます。
[ {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"} ];