Vue中实现Type Ahead笔记

想象实现效果 根据效果步步推进思路、逻辑、一直想，接下来下一步应该做什么，整个链路是慢慢慢慢自己一点点基于需求渐进式长出来的，不用一口气全部想出来，不现实。一开始没有思路的时候，不要着急或者蒙头开始想从大层面的基础开始学习，先回归现有代码和实现，试图从最容易实现的效果入手，先做出一点点，再慢慢加强、完满整个流程。

最前期学习：
在写第一行代码之前，先看已经实现的type ahead功能，人家是怎么做的，可以学习到最基本的DOM结构和css配置，就已经很有帮助了！
例如，实现下拉效果 不一定非要用selection和option，即html5自带的标签，而是可以通过input+div的DOM配合合适的position配置实现样式上的下拉效果。一样很好用的！

如此后，反观实现思路，进行纯技术点的抽离工作：
1 blur与mousedown与click时间的优先级
mousedown>blur>click优先级顺序
想要获取“在鼠标点击后（失去焦点）会消失的元素”的值，必须用mousedown，因为在执行mousedown这一刻，这个元素还在页面上(display不为none)，这也就是所谓mousedown的优先级高于blur的意思。当用click时，事件监听会失败，因为，监听到click事件时，blur事件已经被触发，那么元素就已经消失了(display:none)，对已经消失的元素无法绑定事件监听。这也就是blur的优先级高于click事件的意思。

2 巧妙运用函数参数给功能传参!!! 传你想要用的值！！！从目的出发传参

3 data参数和Vuex的理解
data存储的是当前component用的值！其他component不用的值！只把多个component之间都要用，或者component之间存在dependency关系的值（component1改变了要影响component2的数据）的那些个值存到vuex里！！！ 不要一股脑都存到vuex里

4 利用data属性保存一些boolean值控制部分DOM的显示与否 v-show或v-if

5 在vue中实现type ahead的主思路：
combine multiple event attributes on one single element which you want to add the type ahead function on, define the exactly accurate behaviour for each event to build up a function that looks exactly like the "type ahead" functionality.
充分利用多个事件属性，为每个事件属性定义合适、正确的“小动作”，最后，这些个“小动作”拼接成整体上看起来是type ahead的“大功能”效果。

6 附加小功能
当按照ID搜索时，只有当输入结果为4-10位的纯数字时才发送ajax call获取type ahead结果