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

【问题标题】：Load Remote JSON File for Autocomplete Flexdatalist in Wordpress在 Wordpress 中为自动完成 Flexdatalist 加载远程 JSON 文件
【发布时间】：2017-07-28 14:02:35
【问题描述】：

我有一个包含地址、州和邮政编码信息的 json 文件。我利用自动完成 flexdatalist 在用户输入地址时显示建议。当 json 文件是本地的（数据：'myr-mini.json'）时它可以工作，但是当我使用以“http:/..”开头的 url 时它不起作用。请帮我解决这个问题。提前致谢。

<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>

【问题讨论】：

您是否在浏览器控制台中看到消息 No 'Access-Control-Allow-Origin'？如果是的话，原因就很清楚了。更多信息可以搜索CORS
我搜索了 CORS，不知道我需要做什么。我在我的网站上使用完整的 url 测试了脚本，但它不起作用。我尝试包含与显示表单的页面路径相同的 json 文件，但 wordpress 具有不同的路径样式，因为页面是由 php 自动生成的。我正在考虑像脚本一样链接 json 文件（5mb）！？

标签： javascript jquery json wordpress

【解决方案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">

【讨论】：

嗨，伍德罗，感谢您的协助。是的，myjson 可以。早些时候我测试了一个较小的 json 文件，它运行得很好，但是我的地址 json 是一个大文件，我多次尝试将它上传到 myjson 网站，但没有成功，错误显示“413 Request Entity Too Large”。 json 文件有很多行，我将其缩小但仍然认为很大。
谁能帮帮我。告诉我如何在我的网站中使用我自己的 json 文件，并能够在自动完成数据参数中使用 http url 或任何其他方式调用它并修复 CORS。我将非常感谢您花时间提供帮助。

【解决方案2】：

由于我的 json 文件很大，我无法使用启用了 CORS 的 myjson 之类的服务，因此我必须想办法做到这一点，我等了好几个小时才得到答案从某人那里解决我的问题，多次刷新此页面，不幸的是我没有得到帮助，这就是我回答自己的原因，希望它可以帮助某人:)

解决方案： 我用 notepad++ 查找和替换稍微更改了数据，然后添加了 javascript 自动完成例程并将其保存为名为“postmyr.js”的 javascript 文件。然后我将它包含在我的网页几乎正文标签的末尾。（放完整的url路径）

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

从这里：

[
    { "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" },
]

到这里：

var postmyr = [
    { 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'},
];

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

});

上面的代码我只显示了我的 5 行数据，至少你明白了，我的完整数据有 54050 行，即使在移动设备上也可以正常工作。

【讨论】：

【解决方案3】：

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

尝试将您的代码更改为以下内容：

...
  valueProperty: 'postcode',
  data: postmyr
}).on("change:flexdatalist",function(event, data){
    $('#cp_zipcode').val(set.value);

【讨论】：