如何通过JavaScript触发textbox的onchange事件执行搜索过滤

浏览器原生输入事件默认仅响应用户物理交互操作，通过脚本修改value属性属于程序赋值，不会自动触发change、input等输入相关事件，需手动触发对应事件执行筛选逻辑，以下是几种常用实现方案：

方案1：手动派发标准事件（通用性最高） #

适配所有事件绑定方式（包括addEventListener、onchange属性、框架内置绑定等），是首选方案：

// 1. 获取文本框DOM节点
const searchInput = document.querySelector('#你的文本框ID');
// 2. 赋值为跨页传递的搜索值
searchInput.value = '传入的搜索关键词';

// 3. 派发对应事件
// 如果筛选逻辑绑定的是change事件（失焦才触发）
const changeEvent = new Event('change', { bubbles: true, cancelable: true });
searchInput.dispatchEvent(changeEvent);

// 如果筛选逻辑是实时响应输入，绑定的是input事件，替换为以下代码即可
// const inputEvent = new Event('input', { bubbles: true });
// searchInput.dispatchEvent(inputEvent);

方案2：直接调用onchange属性绑定的方法（简单场景适用） #

如果你的筛选逻辑是直接通过onchange属性绑定的，可以直接调用该方法，代码更简洁：

const searchInput = document.querySelector('#你的文本框ID');
searchInput.value = '传入的搜索关键词';
// 校验方法存在后直接调用
if (typeof searchInput.onchange === 'function') {
  searchInput.onchange();
}

注意：该方案仅适配通过onchange属性绑定的事件，对addEventListener绑定的事件无效。

方案3：兼容低版本IE的写法 #

如果项目需要兼容IE9及以下旧版本浏览器，可以使用兼容写法：

const searchInput = document.querySelector('#你的文本框ID');
searchInput.value = '传入的搜索关键词';

if (document.createEvent) {
  // 标准浏览器兼容写法
  const evt = document.createEvent('HTMLEvents');
  evt.initEvent('change', true, true);
  searchInput.dispatchEvent(evt);
} else {
  // 低版本IE专属写法
  searchInput.fireEvent('onchange');
}

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