本文共 787 字，大约阅读时间需要 2 分钟。

前言：

最近在做一个类似于百度文库的项目，基于elementui。

一个文档检索的例子：输入框组件+输入提示（根据关键字检索信息并展示到下拉框里）.

饿了么是有这个组件的，迅捷的集成速度得到了boss的称赞。

然而第二天一大早就有bug了，说这个输入框用户无法删除上次的输入，仔细检查发现这个输入框本质不是“输入框”（介于select和input之间），我们无法像传统的输入框那样光标选中文字delete，既然不行，那就自己写呗。

正文：

1. 页面的架构：由于多页面共享输入框状态，使用vue-router的嵌套路由+vux状态管理能提供更好的页面速度体验（节省输入框重新渲染的开销）.需要在子页面获取computed属性并监听（watch）该属性的变化。
2. 踩坑：根据输入框输入的变化从后台拉取提示数据，马上想到了change事件，但是这个事件只有blur的时候才触发，响应不够迅捷（百度是输入就有触发），于是想到了watch 输入框的v-model绑定变量，事实证明这是个很大的错误（因为我们需要的是用户输入时进行提示，而不是绑定的值变化时提示，输入一般是键盘敲击，而绑定变量发生变化的情况则复杂得多，有可能是键盘输入也可能是某个地方改变了该值,比如当用户点击某个提示项时，需要把该项的值赋给输入框的v-model.）,所以正确的姿势是监听输入框的keyup事件。
3. 功能理顺一下：用户keyup时候，从接口请求数据,打开提示框并把数据显示到视图，用户点击某一项，把该项的值默认到输入框，并跳转到检索页面并以该值为检索条件检索文档。当用户点击文档的空白处（没有点击某项）时，关闭提示框。点击检索按钮时，以输入框的值为检索条件跳转到检索页检索文档...

总结：

功能虽简单，处理不好会有很多的小bug。毕竟手动实现一个检索框，功能点一定要想清楚，条条框框列清楚。会减少返工的几率。