码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-18 20:29:46      阅读:243      评论:0      收藏:0      [点我收藏+]

标签:思路   内心   添加   ges   吐槽   hang   src   nbsp   小白   

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

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

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

    这是搜索数据的

技术分享

 

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

技术分享

技术分享

技术分享

技术分享

技术分享

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

标签:思路   内心   添加   ges   吐槽   hang   src   nbsp   小白   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!