Vue搜索框实现输入防抖与实时联想需两步：一是用ref+setTimeout手写防抖逻辑，每次输入清除旧定时器并设置新延迟请求；二是通过ref控制下拉显隐与键盘导航，结合computed过滤本地联想词，支持方向键、回车、ESC操作。
Vue基础语法实现搜索框的输入防抖与实时联想下拉，核心在于两件事：一是控制请求节奏（防抖），二是联动输入与列表展示逻辑（联想）。不依赖第三方库也能完成，关键在响应式变量设计和事件时机把控。
用 ref + setTimeout 手写防抖逻辑
防抖不是靠监听“输入完成”，而是拦截每次输入，重置计时器。用户还在打字，就取消上一次准备发起的请求。
- 定义一个 ref 存储定时器 ID，比如
debounceTimer = ref(null) - 在
@input或v-model的更新回调中，先清除旧定时器：clearTimeout(debounceTimer.value) - 再设置新定时器，延迟执行搜索逻辑（如调用 API 或过滤本地数据）
- 延迟时间通常设为 300–500ms，太短起不到节流作用，太长影响响应感
联动输入与联想词列表的显示/隐藏
下拉列表不能一直挂着，得根据用户行为动态开关——输入有内容且匹配项存在才显示；失焦或点击空白处要收起。
- 用 ref 控制显隐：
showSuggest = ref(false)，配合v-if控制列表渲染 -
@focus时设为 true；@blur可延时关闭（避免点击列表项时误触发 blur） - 更稳妥的做法是监听 document 点击事件，在
onMounted中绑定，onBeforeUnmount中清除 - 列表元素用
v-for渲染，高亮当前键盘焦点项可用:class="{ active: index === highlightIndex }"
支持键盘操作的关键细节
仅靠鼠标点选不够友好，必须支持方向键移动、回车确认、ESC 关闭等原生体验。
立即学习“前端免费学习笔记（深入）”；
- 给 input 绑定
@keydown.up.prevent和@keydown.down.prevent，手动管理highlightIndex -
@keydown.enter.prevent：若已高亮则选中该项；否则直接按当前关键词搜索 -
@keydown.esc.prevent：直接设showSuggest.value = false - 注意：上下键切换时要限制索引范围（
0 ≤ highlightIndex ≤ list.length - 1）
模糊匹配本地联想词的简易实现
如果联想词来自前端静态数组，不需要发请求，过滤逻辑可直接用 JavaScript 完成。
- 用 computed 计算过滤后列表：
filteredList = computed(() => suggestList.value.filter(item => item.toLowerCase().includes(keyword.value.toLowerCase()))) - 支持中文需注意：
includes对中文完全可用，无需额外处理 - 想提升匹配效果，可用
item.indexOf(keyword.value) > -1或正则new RegExp(keyword.value, 'i').test(item) - 空关键词时，可选择清空列表或显示全部推荐项
