javascript - 做搜索框的历史记录时遇到的问题？

Question

1.做搜索框的历史记录的时候 历史记录是搜索框聚焦时且没有内容时展示
然后点击历史记录的某一条会把这个记录给input然后触发搜索 肯定也会关闭历史记录
但是点击历史记录的时候 触发了input的失焦 然后历史记录点击事件不生效了
尝试过点历史记录的时候 给300延迟关闭历史记录 感觉体验不好
也试过历史记录给透明度0 但是关闭了也能点着肯定是不用说的 所以问下大佬们有什么解决方法吗
2.还有个问题是 search组件点清除图标的时候 它是算清空输入框并且失焦的
触发了onChange 然后满足了搜索框没有内容展示 但是它会自动失焦 （失焦在前 onChange在后） 最后用了个开关 点击了清除图标 开关设置true onChange的时候开关为true仍然不给展示
感觉是很笨的方法（可能是本身实现思路就不大好） 所以虽然有效但是期待更好的方法和思路

Answer 1

1. 搜索框历史记录问题

解决点击历史记录导致input失焦的问题，可以通过阻止事件冒泡来实现。当点击历史记录时，先阻止点击事件的冒泡，然后再执行聚焦input的操作，这样可以确保点击历史记录不会触发input的失焦事件。

// 假设historyList是历史记录的数组// handleClick是处理历史记录点击的方法historyList.forEach((item, index) => {  const div = document.createElement('div');  div.textContent = item;  div.addEventListener('click', (e) => {    e.stopPropagation(); // 阻止事件冒泡    handleClick(item); // 处理点击事件  });});

2. 清除图标问题

对于清除图标导致搜索框自动失焦的问题，可以通过在清除图标上添加一个标志位，用来判断是否是用户点击了清除图标。当用户点击清除图标时，先修改标志位，然后在失焦事件中检查该标志位，如果标志位为true，则不触发失焦操作。

// 假设clearIcon是清除图标的DOM节点// isClearIconClicked是标志位，初始为falseclearIcon.addEventListener('click', () => {  isClearIconClicked = true; // 修改标志位为true  input.value = ''; // 清空输入框});input.addEventListener('blur', () => {  if (isClearIconClicked) { // 检查是否是用户点击了清除图标    isClearIconClicked = false; // 修改标志位为false  } else {    // 如果不是用户点击了清除图标，正常处理失焦事件  }});

这样就可以解决清除图标导致搜索框自动失焦的问题。同时，通过在历史记录上添加事件监听器并阻止事件冒泡，也可以解决点击历史记录导致input失焦的问题。