本文介绍通过监听 input 事件检测搜索框内容清空行为，并动态控制下拉列表显隐，解决原生 <input type="search"> 的清除按钮不触发 focusout 或 blur 导致下拉未关闭的问题。
本文介绍通过监听 `input` 事件检测搜索框内容清空行为，并动态控制下拉列表显隐，解决原生 `` 的清除按钮不触发 `focusout` 或 `blur` 导致下拉未关闭的问题。
在 WebKit 浏览器（如 Chrome、Safari）中，<input type="search"> 自带的清除按钮（×）点击后会清空输入值，但不会触发 blur、focusout 或 click 事件，仅触发 input 事件。因此，依赖 :focus-within 的纯 CSS 方案无法响应清除操作——即使输入框失去文本，只要仍处于聚焦状态，.options 仍保持显示。
要可靠关闭下拉列表，需结合 JavaScript 监听 input 事件，根据输入值长度动态控制 .options 的显示状态：
<form method="get" action="">
<fieldset class="form">
<div class="formtextbox">
<!-- 添加 id 便于 JS 获取 -->
<input id="search-input" title="search_form_title" type="search" placeholder="Search" autocomplete="off">
<!-- 为下拉容器添加唯一 id -->
<div id="options-container" class="options">
<ul unselectable="on">
<li>apple</li>
<li>banana</li>
<li>pineapple</li>
<li>strawberry</li>
</ul>
</div>
</div>
<div class="formbutton">
<input type="submit" hidden />
</div>
</fieldset>
</form>.form .formtextbox {
position: relative;
display: inline-block;
width: 100%;
}
.form .formtextbox .options {
display: none; /* 默认隐藏 */
position: absolute;
background-color: var(--white);
min-width: 100%;
box-shadow: 0px 2px 7px 0px #0000001F;
padding: 12px 16px;
z-index: 1;
margin-top: 4px; /* 可选：微调与输入框间距 */
}
/* 聚焦时显示（支持键盘/鼠标聚焦） */
.form .formtextbox:focus-within .options {
display: block;
}// 确保 DOM 加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search-input');
const optionsContainer = document.getElementById('options-container');
if (searchInput && optionsContainer) {
searchInput.addEventListener('input', () => {
// 当输入为空时隐藏下拉，否则显示（可选：仅在有焦点时才显示）
if (searchInput.value.trim() === '') {
optionsContainer.style.display = 'none';
} else {
// 注意：此处不强制显示，避免与 focus-within 冲突；推荐仅用于隐藏逻辑
// 若需主动展开，可结合 debounce + 搜索建议逻辑
}
});
// 补充：点击外部区域收起下拉（增强体验）
document.addEventListener('click', (e) => {
const isClickInside = searchInput.contains(e.target) || optionsContainer.contains(e.target);
if (!isClickInside) {
optionsContainer.style.display = 'none';
}
});
}
});✅ 关键要点说明：
- input 事件是捕获清除按钮行为的唯一可靠方式，它在每次输入值变更（包括清空）时触发；
- 不建议直接监听 search 事件（仅在回车时触发），也无法覆盖 × 按钮场景；
- focus-within 保留作为“聚焦即展开”的基础逻辑，JavaScript 仅负责“清空即收起”，二者协同无冲突；
- 添加外部点击收起逻辑可提升交互完整性，避免用户误操作后下拉残留；
- 若项目使用框架（如 React/Vue），应将该逻辑封装为受控组件或指令，避免直接操作 style.display。
此方案兼容所有现代浏览器，无需 polyfill，且保持语义化 HTML 结构，是解决搜索框清除按钮与下拉联动问题的轻量级最佳实践。
