当输入框失焦且未点击指定DIV时隐藏该DIV的JavaScript实现求助

嘿，很高兴能帮到你！你这个实时搜索的需求太常见啦，核心就是要搞定输入框失焦和搜索建议框点击的冲突——毕竟点击建议的时候输入框也会失焦，但这时候可不能把建议框藏起来对吧？

先明确下问题本质：直接给输入框加blur事件的话，会出现一个尴尬的情况：当你点击搜索建议DIV时，输入框会先触发blur，如果这时候直接隐藏DIV，就会导致点击操作失效。所以我们需要一个小技巧来判断失焦后点击的是不是目标DIV。

我给你两种实用的解决方案，你可以根据自己的HTML结构选：

方法一：延迟判断 + 事件拦截 #

这种方法兼容性拉满，逻辑也简单，就是给隐藏操作加个短延迟，让点击建议框的事件先触发，再取消隐藏。

先补全你的HTML片段（方便演示）：

<div class="col-md-4 col-md-push-2" id="isFocus">
  <div class="input-group">
    <input placeholder="Analyseverzeichnis" class="form-control" id="searchInput">
  </div>
  <!-- 这是你的搜索建议容器 -->
  <div id="suggestions" class="search-suggestions" style="display:none;">
    <!-- 动态生成的搜索建议项会放在这里 -->
  </div>
</div>

对应的JS代码：

const searchInput = document.getElementById('searchInput');
const suggestionsDiv = document.getElementById('suggestions');
let hideTimer;

// 输入框失焦时，延迟150ms隐藏建议框
searchInput.addEventListener('blur', () => {
  hideTimer = setTimeout(() => {
    suggestionsDiv.style.display = 'none';
  }, 150);
});

// 点击建议框时，取消隐藏操作
suggestionsDiv.addEventListener('click', () => {
  clearTimeout(hideTimer);
  // 这里可以加点击建议后的逻辑，比如把选中内容填入输入框
});

// 如果建议项是可聚焦元素（比如a/button），再加个focusin事件兜底
suggestionsDiv.addEventListener('focusin', () => {
  clearTimeout(hideTimer);
});

// 输入框聚焦时，有内容就显示建议框（可选）
searchInput.addEventListener('focus', () => {
  if (suggestionsDiv.children.length > 0) {
    suggestionsDiv.style.display = 'block';
  }
});

方法二：全局点击事件判断 #

这种方法逻辑更清晰，通过监听全局点击事件，判断点击的目标是否在输入框或建议框范围内，不在的话再隐藏。

JS代码：

const searchInput = document.getElementById('searchInput');
const suggestionsDiv = document.getElementById('suggestions');

// 监听全局点击
document.addEventListener('click', (e) => {
  const isClickInInput = searchInput.contains(e.target);
  const isClickInSuggestions = suggestionsDiv.contains(e.target);
  
  // 既没点输入框也没点建议框，就隐藏
  if (!isClickInInput && !isClickInSuggestions) {
    suggestionsDiv.style.display = 'none';
  }
});

// 输入内容时触发实时搜索并显示建议框（你的核心搜索逻辑）
searchInput.addEventListener('input', () => {
  // 这里写你的实时搜索逻辑，比如根据输入内容生成建议项
  // 假设搜索到结果后显示建议框
  suggestionsDiv.style.display = 'block';
});

小提醒 #

• 记得根据你实际的HTML结构调整元素选择器，比如如果你的建议框是#isFocus的直接子元素，就把选择器改成对应的。
• 实时搜索逻辑里，当输入为空或者没有搜索结果时，也记得主动隐藏建议框哦。

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