Question

我有一个json文件，其中包含地址，状态和邮政编码信息。我使用自动完成flexdatalist来显示建议，同时用户在地址中键入。它适用于json文件是本地文件（数据：＆＃39; myr-mini.json＆＃39;），但是当我使用一个类似＆＃34; http：/..＆＃34;它没有用。请帮我解决这个问题。提前谢谢。

<input id="cp_address" name='Myr Address' type='text' class='flexdatalist' placeholder='Write your country name' size="40">
<input id='Postcode' name='Postcode' type='text' placeholder='enter zipcode' size="40">

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js?ver=1.12.3'></script>    
<script src="scripts/jquery.flexdatalist.js"></script>
<script>
     $('#cp_address').flexdatalist({
     minLength: 2,
     selectionRequired: true,
     visibleProperties: ["value","state"],
     searchContain: true,
     searchIn: 'value',
     searchDelay: 200,
     noResultsText: 'No results found for "{keyword}"',
     data: 'https://studentsklm.com/wp-content/themes/classipress/myr-mini.json'
}).on("select:flexdatalist",function(event, data){
  $('#Postcode').val(data.postcode);
});
</script>

Answer 1

尝试点击JSON数据的URL似乎是一个CORS问题。下面是使用启用了CORS的myjson.com的示例，并在国家输入中输入“Per”会返回结果：

$('#cp_address').flexdatalist({
  minLength: 2,
  selectionRequired: true,
  visibleProperties: ["value", "state"],
  searchContain: true,
  searchIn: 'value',
  searchDelay: 200,
  noResultsText: 'No results found for "{keyword}"',
  data: 'https://api.myjson.com/bins/v588t'
}).on("select:flexdatalist", function(event, data) {
  $('#Postcode').val(data.postcode);
});

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js?ver=1.12.3'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.1.3/jquery.flexdatalist.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-flexdatalist/2.1.3/jquery.flexdatalist.min.css" />

<input id="cp_address" name='Myr Address' type='text' class='flexdatalist' placeholder='Write your country name' size="40">
<input id='Postcode' name='Postcode' type='text' placeholder='enter zipcode' size="40">

Answer 2

由于我的json是一个大文件而且我无法使用启用了CORS的 myjson 等服务，因此我必须找到一种方法来实现它，我等了好几个小时有人来解决我的问题的答案，不断刷新这个页面很多次，不幸的是我没有得到帮助，这就是为什么我自己回答，希望它可以帮助某人：）

解决方案：我用notepad ++查找和替换稍微更改了数据，然后我添加了javascript自动完成例程并保存了一个名为＆＃39; postmyr.js＆＃39;的javascript文件。然后我把它包括在我的网页附近身体标签的末尾。（把完整的url路径）

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <span itemprop="description"> A superb collection of fine gifts and clothing
  to accent your stay in Mexico Beach.</span>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <span itemprop="streetAddress">3102 Highway 98</span>
    <span itemprop="addressLocality">Mexico Beach</span>,
    <span itemprop="addressRegion">FL</span>
  </div>
  Phone: <span itemprop="telephone">850-648-4200</span>
</div>

<div itemscope itemtype="http://schema.org/LocalBusiness">
  <h1><span itemprop="name">Beachwalk Beachwear & Giftware</span></h1>
</div>

由此：

<script type='text/javascript' src='https://yourdomain.com/wp-content/themes/classified/scripts/postmyr.js?ver=4.8'></script>

To This：

[
    { "postcode": "01000", "value": "Alor Redeh", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Alor Tok Terang", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Bohor Gelam", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Jalan Abi Tok Hashim", "postoffice": "Kangar", "state": "Perlis" },
    { "postcode": "01000", "value": "Jalan Alor Sena", "postoffice": "Kangar", "state": "Perlis" },
]

上面的代码我只显示了5行数据，至少你明白了，我的完整数据有54050行，即使使用移动设备也没有问题。

Answer 3

您必须将事件从select：flexdatalist ...更改为change：flexdatalist。

尝试更改以下代码：

false

在Wordpress中为自动完成Flexdatalist加载远程JSON文件

3 个答案: