Vue折腾记

Vue折腾记 - (3)写一个不大靠谱的typeahead组件
2017年07月20日 15:17:05
阅读数：691
前言
typeahead在网站中的应用很多..今天跟着我来写一个不大靠谱的typeahead;

你能学到什么?

自定义事件
遍历的思想
功能细节的考虑
一切都挺不靠谱的…可完善的地方很多.废话不多说,看效果图

更新
2017-07-21: 完善逻辑及美化样式,所以效果图和代码都有所变动
效果图
这里写图片描述

有哪些功能点?

粗糙的模糊搜索 - 借助indexOf
ESC和blur事件清除输入框,没有找到匹配的情况下
Enter默认在找到只剩下一个情况下选中
方向盘的上下(已经阻止光标的移动)选中子项,回车选中
鼠标点击选择子项
搜索框清空情况下默认不触发自定义事件值的返回
鼠标移动+键盘方向键移动位置的同步
placeholder及遍历数据data支持外部传入,也就是绑定props;前者字符串,后者数组对象
代码
typeahead.vue

总结
自此,一个挺粗糙的模糊搜索组件就完成了;

希望此文对于正在阅读的您有所收获~~

有更好的方案或者实现方法的可以留言…谢谢