如何使用数据库输出从 intl-tel-input 自动填充 preferredCountries

How to auto populate preferredCountries from intl-tel-input with db output

我想填充 preferredCountries:["xx","yy","zz"] 使用从 mysql 数据库中获取最常用国家代码的函数并首先列出它们最高的,并且至少有 4

我有一个带有 bootstrap4 和数据表的网站,我想填充首选列表,这样您就不必滚动太多。

var input = document.querySelector("#CountryPhone");
var iti = window.intlTelInput(input, {
    initialCountry: "auto",
    separateDialCode: "true",
    autoPlaceholder: "aggressive",
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel- 
        input/14.0.7/js/utils.js",
    preferredCountries:["gb","us","at"],
    geoIpLookup: function(success, failure) {
        $.get("https://ipinfo.io", function() {}, 
           "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : ""; 
            success(countryCode);
            });
        },
    });

我在单独的 php 文件的函数中有这个 sql:

"SELECT DISTINCT c.iso_code FROM countries c
LEFT JOIN customer cu on c.country_name = cu.country_name
GROUP BY c.country_name
HAVING count(cu.country_name) >= 4
ORDER BY count(cu.country_name) DESC, c.iso_code ASC"

并且 return 是一个 json_encoded 输出,就像需要的那样:["xx","yy","zz"]

我想做这样的事情:

preferredCountries: function() {
    $.ajax({
    url:"fetch.php",
    method:"POST",
    data:{action:"f2Countries"},
    dataType:"json",
    success:function(data){},
    error: function() {  }
 });
 },

但是我这方面不强,所以我的猜测能力提高了。 永远不会调用 preferredCountries 下的函数。 我在它应该去的函数中启用了调试和断点,但它永远不会那么远。

因此需要一些帮助来创建正确的函数,例如我从文档中借用的用于 geoIpLookup 的函数。

我终于解决了我的问题。

所以基本上我想用最常用的国家/地区的国家/地区代码动态填充“preferedCountries”,并按降序排列。

通过 $.ajax() 调用我要求我的数据库按 desc 顺序获取国家代码并以 json 格式返回数据

我确保销毁 var iti 并使用变量重新启动它。

preferedCountries = JSON.parse(data)
iti.destroy();
iti = window.intlTelInput(input, {
    separateDialCode: "true",
    autoHideDialCode: "true",
    autoPlaceholder: "polite",
    preferredCountries: preferedCountries,
    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.7/js/utils.js",
    customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
        return "e.g. " + selectedCountryPlaceholder;
    }
});