一个搜索框里的小小细节

搜索框看起来很小，却连接着一整套操作。这篇示例笔记记录一些容易忽略的细节。

从打开到关闭

页面上的按钮与 Ctrl K 或 ⌘ K 应当进入同一个搜索界面。打开后，输入框获得焦点，读者可以直接输入。

按下 Escape 关闭后，焦点应回到打开它的地方。使用原生对话框可以帮助处理焦点边界与关闭行为。

const dialog = document.querySelector('dialog');
const trigger = document.querySelector('[data-open-search]');

trigger.addEventListener('click', () => dialog.showModal());

清楚回应每一次输入

输入关键词后，结果与数量应该一起更新。没有匹配内容时，也要给出一句具体的提示，例如建议尝试其他关键词。

返回“0 个结果”是一种真实的状态，需要像正常结果一样被认真设计。

键盘也应该走得通

上下方向键可以选择结果，Enter 打开选中的文章。Tab 则保留普通的焦点顺序。操作说明放在搜索框底部，第一次使用的人也能很快找到。

最好的细节不一定需要被记住，但当它们缺席时，人会很快感觉到。