Algolia Places输入框选建议后提交未填充问题求助

我之前也踩过这个坑！问题根源在于你自定义了templates.value函数，但没手动把选中的建议内容同步到输入框的value属性里——虽然视觉上输入框显示了选中的内容，但DOM元素的实际value还是你手动输入的字符，所以表单提交时只会传那些内容。

修复方案： #

• 提前缓存主地址输入框元素，避免重复查询DOM
• 在change事件回调里，除了更新城市输入框，还要同步选中的内容到主地址输入框的value属性

修改后的完整代码如下：

(function() {
  // 提前缓存主地址输入框，提升性能
  const addressInput = document.querySelector('input[name="address-line1"]');
  
  var placesAutocomplete = places({
    appId: 'APPID',
    apiKey: 'APIKEY',
    container: addressInput,
    templates: {
      // 这里可以根据需求返回显示内容，比如完整地址用suggestion.formatted
      value: function(suggestion) {
        return suggestion.name;
      }
    }
  }).configure({ type: 'address' });

  placesAutocomplete.on('change', function resultSelected(e) {
    // 关键：同步选中内容到输入框的value属性
    addressInput.value = e.suggestion.name;
    // 保持原有城市输入框的更新逻辑
    document.querySelector('#ec-city-list').value = e.suggestion.city || '';
  });
})();

<script src="https://cdn.jsdelivr.net/npm/places.js@1.19.0"></script>

补充说明： #

默认情况下Places.js会自动同步选中内容到输入框value，但自定义templates.value后会覆盖这个自动逻辑，必须手动处理。如果需要提交完整结构化地址，还可以在事件回调里同步邮编、州等字段到对应表单输入框。

内容的提问来源于stack exchange，提问作者r.m m.m