110、【Ubuntu】【Hugo】搭建私人博客：搜索功能（六）

【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除

背景

分析了 sInput.onkeyup 功能，并分析了 <header> 和 <a href ...> 之间的关系，下面继续

搭建私人博客

OK，下面看下一个功能

给搜索框 sInput 添加一个 search 监听事件，search 是 HTML5 中专门为 <input type="search"> 提供的一个原生事件，里面的 this.value 是当前输入框的值，!this.value 表示输入框为空（即用户清空了内容），此时就调用 reset() 函数，重置搜索状态，比如清空结果列表，恢复默认 UI 等

另外，这里注释提到比如 clicked on x，这里的 x 表示的是搜索框右侧，由浏览器自动提供的 x 清除按钮，注意，不是所有浏览器都支持 x 按钮，但像 Chrome，Edge，Safari 等现代浏览器在检测到 type="search" 时会自动显示这个按钮，效果如下

按下 F12，可查看到搜索框类型自带 type="search"

OK，下面来看下上面提到的 reset 函数

其作用是重置整个搜索界面，让用户回到初始状态

resultsAvailable = false：该变量前面介绍过，用来标记当前是否有搜索结果，比如在键盘导航逻辑中判断是否允许上下键选择，reset 将其置为 false 表示现在没有可用的搜索结果
resList.innerHTML = sInput.value = ''：链式赋值，其效果等价于

javascript 复制代码

sInput.value = '';
resList.innerHTML = '';

这里 sInput.value = '' 表示把搜索框 <input> 的文字清空，而 resList.innerHTML = '' 则是把结果显示区域（之前介绍的 search.html 模板中的 <ul id="searchResults">）清空，隐藏所有搜索结果

这里 JavaScript 允许链式赋值，因为赋值表达式会返回被赋的值（这里是 ''）

sInput.focus：将光标自动聚焦到搜索输入框上，这样用户无需手动点击，就能继续输入新的关键词，可以提升用户体验，比如用户刚点击 x 清空内容，光标可以自动回来，然后可以立刻重新搜索

OK，下面来看下一个功能

这里实现了键盘导航的功能，可以让用户通过方向键和退出键 Esc 来操作搜索框和搜索结果列表，而不需要用鼠标，可以提升用户体验和无障碍访问

这里使用了 onkeydown，而前面展示搜索结果的时候用的是 onkeyup，onkeydown 和 onkeyup 是 JavaScript 中处理键盘事件的两个核心方法，它俩触发的时机不同，用途也不同，下面来详细介绍下

首先，其核心区别是按键的阶段不同：

keydown：按下键的瞬间，手指刚压下去
keyup：松开键的瞬间，手指抬起来

举个例子，用户在输入框里打一个字母 a，按下 a 键时，触发 keydown（注意，此时输入框内容还没变），浏览器把 a 插入到输入框，然后用户松开 a 键，触发 keyup（此时输入框内容已经是 a 了），所以总结一下，如果想阻止某个键生效（比如禁止输入非数字），就用 keydown + e.preventDefault，如果想获取用户输入后的完整内容，就用 keyup

下面总结下两者的使用场景

场景	常用事件	原因
实时搜索（边打字边查）	`keyup`	此时 `input.value` 应该已经包含刚输入的字符
快捷键（比如 Ctrl + S）	`keydown`	要在按键按下时立即响应，不能等松开，不然用户体验差
游戏控制（按住移动）	`keydown` + `keyup` 配合	`keydown` 开始移动，`keyup` 停止
阻止非法输入	`keydown`	在字符插入前拦截

OK，回到功能代码，可以看到搜索用的是 onkeyup

javascript 复制代码

sInput.onkeyup = function (e) {
    // 执行 fuse.search(this.value.trim())
}

确保只有松开键后，this.value 才包含最新输入的内容，如果用 keydown，就会少一个字符

而键盘导航用的是 onkeydown

javascript 复制代码

document.onkeydown = function (e) {
    if (key === "ArrowDown") { ... }
}

因为方向键和退出键 Esc 不改变输入框内容，用户希望按下就立刻响应，比如按 ↓ 立刻高亮下一项，而不是等用户松手，如果用 keyup，用户就会感觉卡一下才动，那体验就会差

OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：搜索功能（七）