Vue.js可纯手工实现带自动搜索的下拉框，核心是v-model绑定输入、computed过滤选项、ref控制展开/聚焦、防抖优化及ARIA可访问性支持。
Vue.js 实现带自动搜索的下拉框，核心是结合输入过滤 + 下拉列表展示 + 键盘导航（可选），不依赖第三方库也能轻量完成。
基础结构：输入框 + 下拉列表联动
用一个 input 接收用户输入，用 v-model 绑定搜索关键词；下拉列表渲染时只显示匹配项，通过 v-for 遍历过滤后的数据。关键点是实时计算过滤结果，避免直接操作 DOM。
- 定义原始选项数组（如
options: ['北京', '上海', '广州', '深圳']） - 用
computed属性生成filteredOptions，内部用includes()或indexOf()做模糊匹配（注意大小写处理） - input 失焦或回车时，可选地自动选中第一个匹配项或清空输入
聚焦与展开控制：模拟原生 select 行为
点击 input 或按 Down 键应展开下拉；点击空白处、Tab 或 Esc 应收起；点击选项后关闭并更新选中值。用 ref 获取 input 元素，配合 @focus、@blur 和 @keydown 控制 isDropdownOpen 状态。
-
@focus设为 true，触发展开 -
@blur延迟 150ms 再设为 false（防止点击选项时先触发 blur） -
@keydown.down和@keydown.up可支持键盘导航（需维护当前高亮索引） - 选项
@click后赋值并关闭下拉
防抖优化：避免高频搜索卡顿
用户快速输入时，频繁触发过滤会影响性能，尤其数据量大或含异步请求场景。用 setTimeout + clearTimeout 实现简易防抖。
立即学习“前端免费学习笔记（深入）”；
- 在
@input中清除旧定时器，新建延迟 300ms 的过滤任务 - 若用户继续输入，前一次任务被取消，仅执行最后一次
- 简单场景可省略；选项超 500 条或涉及 API 请求时建议加上
可访问性补充：键盘操作与 ARIA 标记
提升可用性：支持 Enter 选中、Escape 关闭、上下键切换、Tab 跳出。添加 role="combobox"、aria-expanded、aria-controls 等属性，让屏幕阅读器能识别组件状态。
- 给 input 加
role="combobox" :aria-expanded="isDropdownOpen" - 下拉 ul 加
id="dropdown-list" role="listbox" - 每个 li 加
role="option" :aria-selected="item === selected" - Enter 和 Space 键统一触发选中逻辑
