Google Places自动完成后Dash Input回调未触发的解决方法

问题描述 #

我编写了如下回调函数：

@app.callback(Output("full_address", "data"),
        Input("corrected_address", "value"))
        def store_address(inputdata):
            print(inputdata)
            return inputdata

该回调绑定到由以下代码创建的元素：

dbc.Input(id="corrected_address")

此元素使用Google Places自动完成组件：

var input = document.getElementById('corrected_address');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setFields(['address_component', 'geometry', 'name']);

自动完成功能显示正常，但选择地址完成后，回调并未触发；而手动添加或删除字符修改字段时，回调能正常更新值。使用环境为dash、dash-bootstrap-components，Python版本3.10.12，需解决自动完成后触发回调的问题。

解决方案 #

Google Places自动完成选择地址后，仅更新输入框DOM值，不会触发Dash监听的input或change事件，导致回调无响应。需修改JS代码，在地址选择时手动触发Dash可识别的事件。

修改后的JS代码：

var input = document.getElementById('corrected_address');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.setFields(['address_component', 'geometry', 'name']);

// 监听地址选择事件
autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  // 赋值选中的地址（可根据需求拼接完整地址）
  input.value = place.name;
  // 触发input事件，通知Dash值已更新
  const inputEvent = new Event('input', { bubbles: true });
  input.dispatchEvent(inputEvent);
});

补充说明 #

• 若需要完整地址而非仅名称，可遍历place.address_components拼接，示例：

  // 拼接完整地址
  var fullAddress = place.address_components.map(component => component.long_name).join(', ');
  input.value = fullAddress;
  

• 必须确保事件带有bubbles: true，否则Dash无法捕获到事件。

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