阿拉伯语网站Place Autocomplete在Chrome翻译模式下时好时坏问题求助

Chrome的谷歌翻译功能在处理阿拉伯语页面时，可能会修改输入元素的DOM结构或属性，导致Google Places Autocomplete的绑定关系丢失，进而出现功能时好时坏的情况。以下是针对性的解决方案：

解决方案1：禁止翻译目标输入元素 #

给Autocomplete绑定的输入框添加notranslate类，让谷歌翻译跳过该元素：

<input id="autocomplete" class="notranslate" type="text" />

同时在页面头部添加meta标签，明确页面语言并全局提示翻译工具跳过：

<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="ar" />

解决方案2：监听翻译事件重新初始化Autocomplete #

谷歌翻译完成后会触发google_translate_element_change事件，监听该事件并重新初始化Autocomplete，确保绑定有效：

google.maps.event.addDomListener(window, 'load', initialize);

// 监听翻译完成事件，重新初始化实例
document.addEventListener('google_translate_element_change', function() {
    initialize();
});

function initialize() {
    // 清理旧实例避免重复绑定
    if (window.autocompleteInstance) {
        google.maps.event.clearInstanceListeners(window.autocompleteInstance);
    }
    var input = document.getElementById('autocomplete');
    window.autocompleteInstance = new google.maps.places.Autocomplete(input);
}

解决方案3：明确指定API的语言参数 #

加载Google Maps API时添加language=ar参数，让Autocomplete默认返回阿拉伯语结果，减少翻译工具的干预动机：

<script src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&language=ar"></script>

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