本文介绍如何利用Vue+ElementUI构建一个类似百度搜索的功能。首先讲述了手动实现过程中遇到的问题，如blur和click事件冲突，以及解决办法，如使用mousedown事件或setTimeout。然后提到了ElementUI的autocomplete组件在解决此类问题上的便利性，并给出了相关案例。最后分享了参考链接和个人写博客的初衷。
关于vue+elementui 做类似于百度搜索功能
当时做的时候不清楚elementui中有这个功能，自己手动写了这个功能，后来发现一个bug，又改用了elementui的 autocomplete 是一个可带输入建议的输入框组件。
例案一：自己手动做的用到了 双向绑定，监听input的value值的变化用到 watch 方法（能返回一个新值和旧值） 和 失去焦点事件。
~~在这有一个知识点就是blur和click事件有冲突，我一开始点击li赋值的事件用的是click事件，之后发现点击了下拉选项中的li时，直接触发了blur事件，因为input上的blur事件的优先级高于click 改用了mousedown 或者写一个定时器 setTimeout 更好的选择是使用mousedown。
拿到值回显到input内，把id传给后台。
例案二 elementUI中带输入建议的input使用
本人参考的链接地址 https://www.jianshu.com/p/de922caf337c
第一次写博客 就是想记录一下这个问题，能帮助到你的话很开心。
勿喷！！！ 谢谢了
最低0.47元/天 解锁文章
扫一扫
1245
到【灌水乐园】发言
