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

Posted 2020-10-07 柒偌然-初学者

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

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

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

    这是搜索数据的

 

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