动手：搜索框自动补全

你要做什么

一个搜索框，输入时实时弹出下拉建议列表，点击或回车选中。

⏱️ 20 分钟 | 🛠️ Vue 3

跟着做

帮我做一个搜索自动补全组件（Vue 3）：
1. 一个搜索输入框，placeholder "搜索教程..."
2. 输入时，下方弹出下拉建议列表
3. 建议列表从预设的数据数组中筛选（匹配标题）
4. 支持键盘上下键选择，回车确认
5. 选中后输入框填充选中的值
6. 点击外部关闭下拉列表
7. 没有任何匹配时显示"未找到相关结果"

理解核心逻辑

AI 生成的核心代码会包含：

const filtered = computed(() => 
  items.filter(item => 
    item.title.toLowerCase().includes(query.value.toLowerCase())
  )
);

这就是实时筛选的核心——每次输入变化，重新过滤匹配项。

🎯 进阶挑战

• 加上防抖（输入停止 300ms 后才搜索）
• 改成从 API 获取搜索建议
• 每一行显示图标 + 标题 + 分类标签

✅ 你做到了

• 掌握了搜索自动补全的交互模式
• 理解了 computed 的实时计算
• 学会了键盘事件处理