js搜索框实现自动搜索功能

    做项目的时候,老板让我自己封装一个搜索功能,就类似于百度这种

    输入了字符之后,就可以自动搜索数据,而且还会出现一个下拉框供用户选择,我觉得我老板有问题,网上有这么多插件,不仅封装好了,性能也做了优化,什么功能都有,他不用,一定要我用原生js写,写毛线写,我内心吐槽了很久,不过还是要做,为了工资而低头,所以我这个小白就硬着头皮写完了,肯定有很多不足,也没有封装,就是想到哪里写到哪里,给大家当反面教材看看,如果大家看见了,也可以指点指点我,让我进步

    由于我是在项目里写的,所以有很多东西和大家的肯定不一样,就看一下思路就行了,细节也可以看,但是肯定有问题,html代码里就看自己的写法了,我是给搜索框添加的keyup事件,change事件也可以,不过有个缺点是要失去焦点才触发,不太理想

    这是搜索数据的

    这是下拉框的,这个有点复杂,因为还涉及到点击其他地方隐藏和点击搜索框显示的问题,说起来感觉很简单,但是做起来就不是这么容易了,我写的时候脑袋都乱了,所以代码也很乱

原文地址:https://www.cnblogs.com/qiruoranbeginner/p/7501699.html