本文介绍如何通过监听 input 事件，在用户点击原生 <input type="search"> 的清除按钮（X）时，及时隐藏关联的下拉选项列表，解决 focus-within 无法捕获清除操作导致的下拉菜单滞留问题。
本文介绍如何通过监听 `input` 事件，在用户点击原生 `` 的清除按钮（x）时，及时隐藏关联的下拉选项列表，解决 `focus-within` 无法捕获清除操作导致的下拉菜单滞留问题。
原生 <input type="search"> 的右侧“X”清除按钮在点击时不会触发 click 或 focusout 事件，而是会立即清空输入值并触发 input 事件（且 event.inputType === 'deleteByCut' 或为空字符串变更）。因此，仅依赖 CSS 的 :focus-within 伪类无法响应清除动作——即使输入框仍处于聚焦状态，下拉菜单也会错误地保持显示。
解决方案是结合轻量 JavaScript，监听 input 事件并根据输入值长度动态控制下拉容器的显隐：
<form method="get" action="">
<fieldset class="form">
<div class="formtextbox">
<input id="search-input" title="search_form_title" type="search" placeholder="Search" autocomplete="off">
<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;
}document.getElementById('search-input').addEventListener('input', function() {
const options = document.getElementById('options-container');
// 当输入为空（含清除按钮触发）时隐藏下拉
if (this.value.trim() === '') {
options.style.display = 'none';
} else {
options.style.display = 'block';
}
});✅ 关键要点说明：
- 使用 id 精准定位元素，避免 DOM 查询开销；
- input 事件天然兼容清除按钮、粘贴、键盘输入等多种变更方式；
- trim() 防止空格干扰判断；
- 保留 :focus-within 确保用户主动聚焦时能正常展开，实现「打开靠 CSS，关闭靠 JS」的协同机制；
- 若需支持无障碍访问（如屏幕阅读器），建议为 .options 添加 role="listbox" 和 aria-hidden 动态同步。
该方案简洁、无依赖、兼容主流浏览器，是修复搜索框清除按钮与下拉联动问题的推荐实践。
