如何在intl-tel-input中移除优选国家列表的重复国家

你配置的preferredCountries数组本身存在重复的国家编码：gq（赤道几内亚）在数组中出现了2次，intl-tel-input会按照数组传入的顺序依次渲染优选国家，所以重复的编码会对应生成重复的国家选项。

• 方案1：手动删除重复的国家编码，修正后的配置如下：

preferredCountries: [ "gh", "dz","ao","bj","bw","bf","bi","cm","cf","td","km","cd","dj","eg","gq","er","sz","et","ga","gm","gw","ke","ls","lr","ly","mg","mw","ml","mr","mu","ma","mz","na","ne","ng","rw","sn","sc","sl","so","za","ss","sd","tz","tg","tn","ug","zm","zw" ],

• 方案2：如果后续会动态调整优选国家列表，建议先对数组做自动去重再传入配置，避免手动排查遗漏，示例代码：

// 原非洲国家编码数组
const africaCountryCodes = [ "gh", "dz","ao","bj","bw","bf","bi","cm","cf","td","km","cd","dj","eg","gq","er","sz","et","ga","gm","gq","gw","ke","ls","lr","ly","mg","mw","ml","mr","mu","ma","mz","na","ne","ng","rw","sn","sc","sl","so","za","ss","sd","tz","tg","tn","ug","zm","zw" ]
// 数组去重处理
const uniquePreferredCountries = [...new Set(africaCountryCodes)]

// 初始化intl-tel-input时传入配置
const phoneInput = document.querySelector("#your-phone-input")
intlTelInput(phoneInput, {
  preferredCountries: uniquePreferredCountries,
  // 其余原有配置保持不变
})

intl-tel-input默认会将优选国家固定展示在下拉列表最顶部，同时这些国家也会在下方的全量国家列表中按字母顺序正常展示，如果你观察到的重复是「顶部优选区和下方全量区都有同一个国家」，属于组件的默认设计，无需额外修改。如果需要完全移除全量区的优选国家，可以通过组件的onlyCountries配置项传入过滤后的全量国家列表实现。

内容的提问来源于stack exchange，提问作者Deepu