php - 使用 php 脚本作为源的 JQuery 自动完成

Question

我正在使用以下代码将源定义为 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"} ];

Answer 1

根据 jQuery 自动完成文档source can be String, Array, Callback (javascript function)

可能你需要这个：

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