使用intl-tel-input v18.2.1时国家搜索栏无法显示的求助

针对你遇到的点击国旗后国家搜索栏不显示的问题，可按以下步骤排查和修复：

1. 确保DOM元素加载完成后初始化脚本 #

如果脚本在页面DOM元素渲染前执行，document.querySelector("#phone")会找不到目标元素，导致组件初始化失败。解决方法是将初始化代码包裹在DOMContentLoaded事件中，或者将脚本放在目标input元素之后：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/css/intlTelInput.css" />
<!-- 先渲染input元素 -->
<input type="tel" id="phone">
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.querySelector("#phone");
    var iti = window.intlTelInput(input, {
        separateDialCode: false,
        countrySearch: true
    });
});
</script>

2. 移除重复的utils.js配置 #

你同时通过<script>标签和组件配置中的utilsScript引入了utils.js，虽然不会报错，但可能造成不必要的重复加载，建议保留其中一种方式即可（上面的示例已移除配置中的utilsScript）。

3. 排查资源加载问题 #

• 打开浏览器开发者工具（F12），切换到Network标签，确认intlTelInput.css、intlTelInput.min.js、utils.js均成功加载（状态码为200）。如果资源加载失败，尝试更换CDN地址或下载资源到本地引入。
• 检查Console标签是否有报错信息，比如intlTelInput is not defined（说明脚本未加载成功）或Cannot read properties of null（说明找不到#phone元素）。

4. 检查样式冲突 #

如果资源加载正常但仍看不到搜索栏，可能是页面其他CSS样式覆盖了组件的默认样式：

• 在开发者工具的Elements标签中，查找.iti__search-container或.iti__search-input类，检查其display、opacity等属性是否被设置为隐藏状态。
• 若发现冲突样式，可添加更高优先级的CSS规则恢复组件默认样式，例如：

.iti__search-container {
    display: block !important;
}

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