JSONP 自动填充输入框问题

Question

我正在尝试使用实时 API 搜索为文本框自动建议值。就目前而言，我正在使用 PHP 搜索页面来查询公司房屋 API，它返回以下值；

{"items":

"CAPI LTD":"08672927",
"CAPI CONSULTANTS LIMITED":"09806330",
"CAPI G LTD":"10873948",
"CAPI GROUP LIMITED":"10990634",
"CAPIS HOLDING LIMITED":"10003819",
"CAPI VENTURES LTD":"08553864",
"CAPI MANAGEMENT LTD":"09311575",
"CAPI LIFE LIMITED":"08632621",
"J & L CAPIS LIMITED":"04588481",
"OPULENCE CAPI LIMITED":"SC588630",
"CAPO DEI CAPI LIMITED":"09799325",
"CAPO DEI CAPI LIMITED":"07683458",
"AQUELA GLOBAL TRADING & MARKETING LIMITED":"10720939",
"BEAUPRE GARBEAU LIMITED":"10776401",
"BRIAN PETERS LIMITED":"02100958",
"CAPIA LTD":"09343893",
"CAPIAN LIMITED":"01807368",
"CAPIATIN CONTRACTING LTD":"10621303",
"CAPIBARRA LIMITED":"10925681",
"CAPIC LTD.":"04502064",    
}

我用来自动填充输入框的 Javascript 如下：

$(document).ready(function(){
  $('.companyName input').autocomplete({
    source: function (request, response) {
      $.getJSON("http://internalserver/php/cal/search.php?company=capital", function (data) {
            response($.map(data, function (value, key) {
                return {
                    label: value,
                    value: key
                        };
            }));
        });
        },
        minLength: 2,
        delay: 100
    });
});

输入框的 class 为 "companyName"。

我希望 - 在字段中输入两个键后 - 自动建议应该会出现在下方，其中包含与条款匹配的公司名称。然而，发生的事情是输入框似乎没有任何值。我也没有收到任何令人沮丧的控制台错误。

有人知道我这里哪里错了吗？

Answer 1

我已经找到答案了。

Search.php脚本在工作版本中输出的格式是这样的：

[{"label":"BSKYB PLC","value":"BSKYB PLC","address":"The Hub, Grant Way, Isleworth, Middlesex, England","id":"09158139"}, {"label":"BSKYB GUERNSEY LIMITED","value":"BSKYB GUERNSEY LIMITED","address":"1 Le Marchant Street, St Peter Port, Guernsey, GY1 4HP","id":"FC029076"}, {"label":"BSKYB GUERNSEY LIMITED","value":"BSKYB GUERNSEY LIMITED","address":"Sky 8 Grant Way, Isleworth, TW7 5QD","id":"BR010528"}, {"label":"BSKYB GROUP PLC","value":"BSKYB GROUP PLC","address":"The Hub, Grant Way, Isleworth, Middlesex, England, TW7 5QD","id":"09158652"}, {"label":"SKY GUARANTEE INVESTMENTS LIMITED","value":"SKY GUARANTEE INVESTMENTS LIMITED","address":"Grant Way, Isleworth, TW7 5QD","id":"05376199"}, {"label":"SKY HISTORY LIMITED","value":"SKY HISTORY LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03071747"}, {"label":"SKY LLU ASSETS LIMITED","value":"SKY LLU ASSETS LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03137522"}, {"label":"SKY OPERATIONAL FINANCE LIMITED","value":"SKY OPERATIONAL FINANCE LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"02906994"}, {"label":"SKY PUBLICATIONS LIMITED","value":"SKY PUBLICATIONS LIMITED","address":"Grant Way, Isleworth, Middlsex, TW7 5QD","id":"03071751"}, {"label":"SKY SNA LIMITED","value":"SKY SNA LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"07418281"}, {"label":"SKY SNI LIMITED","value":"SKY SNI LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"08458834"}, {"label":"SKY SNI OPERATIONS LIMITED","value":"SKY SNI OPERATIONS LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"08522753"}, {"label":"SKY TELECOMMUNICATIONS LIMITED","value":"SKY TELECOMMUNICATIONS LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"05349163"}, {"label":"SKY COMEDY LIMITED","value":"SKY COMEDY LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03079609"}, {"label":"SKY HEALTHCARE SCHEME 2 LIMITED","value":"SKY HEALTHCARE SCHEME 2 LIMITED","address":"Grant Way, Isleworth, Middlesex, United Kingdom, TW7 5QD","id":"08553886"}, {"label":"SKY GROUP FINANCE PLC","value":"SKY GROUP FINANCE PLC","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"05576975"}, {"label":"SKY TELECOMMUNICATIONS SERVICES LIMITED","value":"SKY TELECOMMUNICATIONS SERVICES LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"02883980"}, {"label":"BSKYB HEALTHCARE SCHEME LIMITED","value":"BSKYB HEALTHCARE SCHEME LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"02766412"}, {"label":"BSKYB INVESTMENTS LIMITED","value":"BSKYB INVESTMENTS LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"05374700"}, {"label":"BSKYB B LIMITED","value":"BSKYB B LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"03886899"}, {"label":"BSKYB CRICKETER LIMITED","value":"BSKYB CRICKETER LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"04368567"}, {"label":"WORLD RECRUITMENT WORLDWIDE LTD.","value":"WORLD RECRUITMENT WORLDWIDE LTD.","address":"3 Greenacres Drive, Boston, Lincolnshire, PE21 7LJ","id":"07705799"}, {"label":"PICNIC LIMITED","value":"PICNIC LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"05348872"}, {"label":"SKY DIGITAL SUPPLIES LIMITED","value":"SKY DIGITAL SUPPLIES LIMITED","address":"8 Salisbury Square, London, EC4Y 8BB","id":"05349192"}, {"label":"SKY VENTURES LIMITED","value":"SKY VENTURES LIMITED","address":"Grant Way, Isleworth, Middlesex, TW7 5QD","id":"03092549"}]

这是通过以下块在 PHP 脚本中实现的：

$json = json_decode($resp, true);


//print the values in the correct format for out JSON reading JQuery script on the form
print "[";

$j=count($json["items"]);
    for ($say=0 ; $say < $j; $say++ )
    {
        $comma = ($say<$j-1) ? ", " : "";
        print "{\"label\":\"";
        print $json["items"][$say]["title"];
        print "\",\"value\":\"";
        print $json["items"][$say]["title"];
        print "\",\"address\":\"";
        print $json["items"][$say]["address_snippet"];
        print "\",\"id\":\"";
        print $json["items"][$say]["company_number"];
        print "\"}";
        print $comma;

    }

print "]";

寻找它的代码是这样的：

$(document).ready(function(){

  $( ".companyName input" ).keyup(function(){
  $( ".companyName input" ).autocomplete({
      source: function( request, response ) {
        $.ajax( {
          url: "http://intenral_server_here/php/cal/search.php",
          dataType: "json",
          data: {
            term: request.term
          },
          success: function( data ) {
            response( data );
          }
        } );
      },
      minLength: 5,
          select: function( event, ui ) {
            $('.companyNumber input').val(ui.item.id);
            $('.hqAddress input').val(ui.item.address);
      }
      }

     );

JSONP 自动填充输入框问题

JSONP Autofilling input box Issue

javascript

jquery

jsonp