如何在通过JavaScript设置搜索框值后触发搜索？

这个问题在操作前端框架驱动的表单时非常常见——直接修改DOM元素的value属性，并不会触发框架监听的输入事件。比如React、Angular这类框架，或是自定义的表单逻辑，大多依赖input、change这类用户交互事件来同步数据绑定，而非直接监听DOM属性的变化。下面给你两个最有效的解决方案：

方案一：触发input事件同步输入值（优先推荐） #

在设置完输入框值后，手动派发一个input事件，模拟用户真实输入的行为，让框架感知到值的更新，之后再点击搜索按钮就会正常生效：

// 先获取输入框元素，避免重复查询DOM
const searchInput = document.querySelector("body > main > eup-orders > div > div > div > div.table-header.form-inline.clearfix.with-search > form > div > div > input");

// 设置搜索内容
searchInput.value = "Hello World";

// 关键步骤：派发input事件，通知框架值已更新
searchInput.dispatchEvent(new Event('input', { 
  bubbles: true, // 允许事件冒泡，确保上层组件能捕获到
  cancelable: true 
}));

// 触发搜索按钮点击
document.querySelector("#btn-search").click();

方案二：模拟按下Enter键触发搜索 #

如果网站支持回车提交搜索，也可以直接在输入框上模拟Enter键的按下事件，这样既不用点击按钮，也能直接触发搜索逻辑：

const searchInput = document.querySelector("body > main > eup-orders > div > div > div > div.table-header.form-inline.clearfix.with-search > form > div > div > input");
searchInput.value = "Hello World";

// 先同步输入值给框架
searchInput.dispatchEvent(new Event('input', { bubbles: true }));

// 模拟Enter键按下
const enterKeyEvent = new KeyboardEvent('keyup', {
  key: 'Enter',
  code: 'Enter',
  bubbles: true,
  cancelable: true
});
searchInput.dispatchEvent(enterKeyEvent);

额外排查技巧 #

如果上述方法仍不生效，可以在Chrome控制台输入getEventListeners(searchInput)，查看这个输入框绑定了哪些自定义事件。部分特殊组件可能会监听change或者自定义事件，针对性地派发对应事件即可解决问题。

备注：内容来源于stack exchange，提问作者F. Zer