如何去除输入框历史记录弹出列表以实现autocomplete列表箭头键滚动？

• 设置输入框专属属性：给你的输入框添加autocomplete="off"属性，多数浏览器会停止显示历史记录弹出列表。代码示例：

  <input type="text" id="country-input" autocomplete="off">
  

  若部分浏览器（如Chrome）对off支持不佳，可尝试autocomplete="new-password"，这个值通常不会触发浏览器的历史记录补全：

  <input type="text" id="country-input" autocomplete="new-password">
  

• 用JS强制禁用补全：如果属性设置无效，可在输入框聚焦时动态修改属性并触发自定义列表逻辑：

  const input = document.getElementById('country-input');
  input.addEventListener('focus', () => {
    input.setAttribute('autocomplete', 'off');
    input.dispatchEvent(new Event('input'));
  });
  

• CSS兜底隐藏默认补全：针对不同浏览器的默认补全样式进行隐藏（注意选择器需对应目标浏览器）：

  /* 隐藏Chrome的补全按钮 */
  input::-webkit-contacts-auto-fill-button,
  input::-webkit-credentials-auto-fill-button {
    display: none !important;
  }
  /* 提升自定义列表层级压过默认补全 */
  .your-custom-autocomplete-list {
    z-index: 1000 !important;
    position: relative;
  }
  

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