如何在jQuery中通过change事件调用函数？解决foundation-autocomplete值变更触发问题

方案1：监听coral-textfield的标准表单事件 #

coral-textfield作为自定义表单元素，支持标准的input（实时输入时触发）和change（输入完成/失去焦点时触发）事件，直接绑定到内部的输入元素即可：

// 获取内部的coral-textfield元素
const autocompleteInput = document.querySelector('foundation-autocomplete coral-textfield');

// 定义值变化处理函数
function handleValueChange() {
  console.log('foundation-autocomplete值已变更:', autocompleteInput.value);
  // 这里写入你的业务逻辑
}

// 绑定input事件（实时响应输入内容变化）
autocompleteInput.addEventListener('input', handleValueChange);
// 可选：绑定change事件（输入完成/元素失焦时响应）
autocompleteInput.addEventListener('change', handleValueChange);

方案2：监听foundation-autocomplete组件的change事件 #

foundation-autocomplete作为AEM的基础组件，在值发生变更时会触发自身的change事件，直接监听父组件即可：

const foundationAutocomplete = document.querySelector('foundation-autocomplete');

function handleValueChange(event) {
  console.log('foundation-autocomplete值已变更:', event.target.value);
  // 业务逻辑写在这里
}

foundationAutocomplete.addEventListener('change', handleValueChange);

方案3：修复你的MutationObserver代码 #

如果一定要用MutationObserver，需要调整监听目标和配置，只关注input元素的value属性变化，避免无关DOM变动干扰：

// 直接获取内部的coral-textfield元素
const autocompleteInput = document.querySelector('foundation-autocomplete coral-textfield');

const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // 只处理value属性的变更
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      console.log('foundation-autocomplete值已变更:', autocompleteInput.value);
      yourFunction();
    }
  }
});

function yourFunction() {
  // 这里写入你的业务逻辑
}

// 配置仅监听value属性的变化
observer.observe(autocompleteInput, { attributes: true, attributeFilter: ['value'] });

原代码失效原因 #

原代码监听了整个foundation-autocomplete的子树和所有属性变化，会被大量无关DOM变动（如下拉框展开/收起时的aria属性变化）干扰，且未过滤仅关注value属性，同时coral-textfield的value更新机制可能导致属性变更未被正确捕捉。

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