如何在输入框自动补全时获取值并保存到localStorage？

问题说明 #

我需要将输入框的输入值保存到localStorage中，目前通过监听input事件实现功能：手动输入地址或粘贴内容时正常，但点击谷歌地图的自动补全建议时，input事件未触发，导致值无法保存。

输入框代码 #

<input
  type="text"
  name="input"
  id="input"
  value=""
  placeholder="Enter destination"
  class="large pac-target-input"
  autocomplete="off"
>

现有保存逻辑代码 #

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('[name="input"].large');
    if (input) {
        input.value = localStorage.getItem("movingto") || "";
        input.addEventListener('input', function() {
            localStorage.setItem("movingto", this.value);
        });
    }
});

const input = document.getElementById("input");
const autocomplete = new google.maps.places.Autocomplete(input, {
    // ... options
});

解决方案 #

方案1：监听谷歌地图Autocomplete的place_changed事件 #

谷歌地图Autocomplete组件在用户选中建议项时会触发place_changed事件，这是官方提供的触发时机，直接在该事件中保存值即可：

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('[name="input"].large');
    if (input) {
        // 初始化加载本地存储的值
        input.value = localStorage.getItem("movingto") || "";
        
        // 监听手动输入/粘贴事件
        input.addEventListener('input', function() {
            localStorage.setItem("movingto", this.value);
        });

        // 初始化Autocomplete并绑定place_changed事件
        const autocomplete = new google.maps.places.Autocomplete(input, {
            // 你的配置选项
        });

        // 用户选中自动补全建议时保存值
        autocomplete.addListener('place_changed', function() {
            localStorage.setItem("movingto", input.value);
        });
    }
});

方案2：补充change事件监听（可选） #

change事件会在输入框失去焦点且值发生变化时触发，可以作为input事件的补充，覆盖一些边缘场景：

// 在原有input事件监听后添加
input.addEventListener('change', function() {
    localStorage.setItem("movingto", this.value);
});

方案3：使用MutationObserver监听值变化（通用兜底方案） #

如果上述方法都不适用，MutationObserver可以监听输入框value属性的任何变化，无论值是通过何种方式修改的：

// 在DOMContentLoaded回调中添加
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(mutation => {
        if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
            localStorage.setItem("movingto", input.value);
        }
    });
});

// 监听输入框的属性变化
observer.observe(input, { attributes: true });

推荐方案：优先使用方案1，因为它是谷歌地图官方提供的事件，兼容性和可靠性最优，能准确捕获用户选中自动补全建议的时机。

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