Question

我想要实现的目标：当用户完成输入邮政编码时，自动填充将显示所有可能的有效地址。

我是如何尝试这样做的：当用户输入他们的邮政编码，6或7个字符时，在输入第二次延迟后，自动完成将调用AJAX函数，该函数将返回JSON，将被翻译为自动完成以显示客户端。

问题：我没有在浏览器上显示任何内容，并且无助于我每天只能调用api 20次，下面是返回的JSON示例。

我感兴趣的JSON返回的是字符串数组地址，而不是经度和纬度。我看到的其他与此类似的示例和问题在其JSON中具有键和值结构，以便于映射。

问题：如何从AJAX调用返回的地址显示在自动完成下拉菜单中？我可以把它们分成一个div但是自动完成似乎并不承认任何事情。我已经包含了必要的资源：https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css和https://code.jquery.com/ui/1.10.4/jquery-ui.js

来自AJAX的JSON： - 修剪结果，因为有很多：

{  
   "Latitude":51.991799,
   "Longitude":-1.078074,
   "Addresses":[  
      "1 Stable Close, , , , Finmere, Buckingham, Buckinghamshire",
      "10 Stable Close, , , , Finmere, Buckingham, Buckinghamshire",
      "12 Stable Close, , , , Finmere, Buckingham, Buckinghamshire",
      "14 Stable Close, , , , Finmere, Buckingham, Buckinghamshire",
      "16 Stable Close, , , , Finmere, Buckingham, Buckinghamshire"
   ]
}

JavaScript：

var typingTimer; //timer identifier
var typingInterval = 2000; // 2 second delay
var pc = $('#pcode');
var divArray = $('#out4');

//on keyup, start the countdown
pc.keyup(function() {
  clearTimeout(typingTimer);
  if (pc.val) {
    typingTimer = setTimeout(function() {
      postcodeDelay();
    }, typingInterval);
  }
});

function postcodeDelay() {
  apiurl = 'https://api.getAddress.io/v2/uk/' + String(pc.val()) + '?api-key=key';
  // ajax call to the api too get JSON object of addresses that match the postcode entered
  $.ajax({
    type: "GET",
    url: apiurl,
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: possiblePostcodes
  });
}

function possiblePostcodes(data) {

  pc.autocomplete({
    source: data.Addresses
  });
}

HTML

<div class="ui-widget">
  <label for="pcode">Enter a Postcode:</label>
  <input id="pcode" type="text" />
</div>

Answer 1

return {
      label: item.Addresses // picks the array from the JSON object.
}

一个提示：在浏览器开发人员工具中，您可以选择对服务的调用并将响应保存为JSON文件。然后，您可以设置一个网络服务器并从那里进行服务，这样您就可以绕过20个电话/天的限制进行开发。

自动完成不显示字符串数组

1 个答案: