如何通过MapBox Autofill实现表单提交完整地址且不显示次级字段？

核心问题说明 #

你之前的代码里用了disabled="true"，禁用的表单元素不会随表单一起提交，这是导致城市字段无法提交的关键原因。另外，MapBox Autofill本身不会自动填充完整地址到单个字段，但可以通过其JS API获取完整地址和拆分的组件，再手动处理提交逻辑。

方法1：用隐藏字段存储拆分的地址组件（推荐） #

把需要的地址组件字段设为type="hidden"（而非disabled），通过MapBox Autofill的事件回调填充这些字段，同时主输入框显示用户输入/选择的地址。

示例代码：

<form action="/results" method="post">
    <!-- 主地址输入框，用于用户输入和显示选中的地址 -->
    <input name="display_address" placeholder="Enter your address" type="text" autocomplete="street-address" id="main-address" />
    <!-- 隐藏字段，存储拆分的地址组件，用于表单提交 -->
    <input name="street" type="hidden" autocomplete="street-address" id="street" />
    <input name="city" type="hidden" autocomplete="address-level2" id="city" />
    <input name="state" type="hidden" autocomplete="address-level1" id="state" />
    <input name="postal_code" type="hidden" autocomplete="postal-code" id="postal-code" />
    
    <p>
        <center><button type="submit" class="button btn-send">Search</button></center>
    </p>
</form>

<script>
// 初始化MapBox Autofill（确保已引入MapBox的JS库）
const autofill = new mapboxgl.Autofill({
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
    input: document.getElementById('main-address'),
});

// 监听地址选中事件，填充隐藏字段
autofill.on('result', (event) => {
    const result = event.result;
    if (result) {
        // 填充完整显示地址到主输入框
        document.getElementById('main-address').value = result.formatted_address;
        
        // 解析地址组件，填充到对应隐藏字段
        const components = result.address_components;
        document.getElementById('street').value = components.street || '';
        document.getElementById('city').value = components.city || components.town || '';
        document.getElementById('state').value = components.state || '';
        document.getElementById('postal-code').value = components.postal_code || '';
    }
});
</script>

方法2：存储完整地址到单个隐藏字段 #

如果你只需要提交完整的格式化地址，可以直接把选中的完整地址存入一个隐藏字段，主输入框仅用于交互：

<form action="/results" method="post">
    <input placeholder="Enter your address" type="text" autocomplete="street-address" id="main-address" />
    <input name="full_address" type="hidden" id="full-address" />
    
    <p>
        <center><button type="submit" class="button btn-send">Search</button></center>
    </p>
</form>

<script>
const autofill = new mapboxgl.Autofill({
    accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
    input: document.getElementById('main-address'),
});

autofill.on('result', (event) => {
    const result = event.result;
    if (result) {
        document.getElementById('main-address').value = result.formatted_address;
        document.getElementById('full-address').value = result.formatted_address;
    }
});
</script>

关键注意事项 #

• 不要使用disabled属性来隐藏字段，改用type="hidden"或者通过CSS（如position: absolute; left: -9999px;）隐藏可见输入框，确保字段能被表单提交。
• 确保正确引入MapBox Autofill的JavaScript库，并替换YOUR_MAPBOX_ACCESS_TOKEN为你的有效令牌。
• 地址组件的字段名（如components.city）可能因地区不同略有差异，可根据MapBox返回的address_components结构调整。

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