盘点一个好用的搜索框的要素

搜索这东西相信大多人都不陌生，百度、谷歌更是轻车熟路：点击搜索框输入内容回车键，一切变得很简单。然而，如果仔细观察会发现很多没有注意到的小细节在里面，这一个个的细节对应着一个个的交互场景，这些交互又支撑起了人机信息交换的桥梁。

本文主要以谷歌为例,介绍一个好用的搜索框的细节要素。

交互场景有哪些

1. 输入框聚焦

2. 随用户的输入自动补全一些优质搜索条目（PC端一般是10条，移动端可能需要添加滚动条）

3. 支持键盘上下选择自动补全的搜索条目

4. 用户可以隐藏自动补全的内容：按下esc键

实现原理大抵如下：

1. 处理焦点：aufocus或者inputEle.focus()
2. 监听input表单元素的input事件，实时检索并展示
3. 监听input的keyDown事件,判断event.code为ArrowDown和ArrowUp以及Enter和Escape的情况

以上就是检索的大体交互细节，当然还需要有一些UI元素的变化。

兜底交互

程序不可能永远正常运行。因此交互上也要考虑一些程序边界的情况，比如一些不可抗拒因素导致的服务出错、没有结果、结果不准确等。界面上也要有一些入口或元素来承载这些信息。

比如Vuejs官网文档检索模块的缺省部件，在提供了一些提醒的同时也增加了反馈的入口：如果你认为本次检索有误。

google也给出了举报链接：

移动端适配

如果你的搜索框没有考虑到手机端页面，那就太粗心了，因为现在大多人都用手机上网的。

你需要考虑：是开发两套彼此独立互不干扰的界面呢？还是开发一套响应式来兼容手机端。

对于响应式，我们一般采用媒体查询技术来为移动端页面应用不同的css样式,如下我们给div设置了两个背景色：第一个红色默认生效，第二个在屏幕小于600px时生效:

div {
    background-color: red;
}

@media screen and (max-width: 600px) {
    div {
        background-color: green;
    }
}

对于输入框的手机端样式的处理，也是一样的道理，这里不再赘述。

最后

纸上得来终觉浅，欲知此事须躬行。 感谢阅读。