Filter Search 国家筛选 · 在线演示

演示了什么：这个 Demo 让你亲眼看到「输入关键词 → 过滤数组 → 渲染候选项」的搜索提示流程。它还补上了点击、Enter 选择、方向键切换和无结果提示，接近真实表单里的自动完成体验。

关键实现：

1. js 里的 updateResults() 先 trim() 再做 includes()，空输入直接清空结果，避免删除文字后还残留旧候选项。
2. js 里的 render() 使用 replaceChildren() 和 createElement()，不用拼用户输入的 HTML，因此高亮匹配词时也不容易引入注入风险。
3. css 的 .results{max-height...overflow:auto} 把列表限制在卡片内滚动，移动端不会因为结果太多把页面撑出屏幕。

动手改一改：

1. 把 slice(0,12) 改成 slice(0,5)，你会看到候选项变少，搜索框更像紧凑型组件。
2. 把 includes() 改成 startsWith()，再输入 “land”，观察结果会从包含匹配变成只匹配开头。