使用纯JavaScript模拟搜索栏输入无法触发自动补全如何解决

• 直接修改输入框value属性不会触发输入框的原生输入事件，绝大多数带自动补全的搜索框都会监听input、keyup事件来触发候选词匹配，而非仅监听keydown事件
• 手动创建的KeyboardEvent默认不冒泡，若自动补全功能是通过事件委托绑定在父元素上，事件无法被监听器捕获
• 原有代码仅单独测试派发了一次keydown事件，没有和自动打字的逻辑绑定，自然不会在打字过程中触发补全

const field = document.getElementById('search-field');
field.select();
field.focus();
field.value = "";
const text = "smart tv";
const l = text.length;
let current = 0;
const time = 1000;
// 模拟键盘输入的工具函数，覆盖绝大多数补全组件的监听场景
function simulateInput(key) {
  field.dispatchEvent(new KeyboardEvent('keydown', {
    key: key,
    bubbles: true,
    cancelable: true
  }));
  field.dispatchEvent(new InputEvent('input', {
    data: key,
    bubbles: true,
    cancelable: true
  }));
  field.dispatchEvent(new KeyboardEvent('keyup', {
    key: key,
    bubbles: true,
    cancelable: true
  }));
}

const writeText = function(){
  const currentChar = text[current];
  field.value += currentChar;
  // 每次输入字符后触发对应输入事件
  simulateInput(currentChar);
  if(current < l-1) {
    current++;
    setTimeout(writeText, time);
  } else {
    field.setAttribute('value', field.value);
  }
}

myButton.addEventListener('click', function(){
  current = 0; // 每次点击重置进度，避免多次点击出错
  field.value = ""; // 重置输入框内容
  writeText();
})

// 测试事件监听
field.addEventListener('keydown', (e) => {
  console.log(e);
  console.log('type fired!');
})

如果你的搜索框使用了React、Vue等框架开发，直接修改DOM的value和派发原生事件可能依然无法触发框架的双向绑定更新，这种情况下需要额外触发框架绑定的合成事件，或者直接调用搜索框暴露的补全触发方法。

内容的提问来源于stack exchange，提问作者Luis Alejandro López de Anda