jQuery仿搜索引擎搜索框下拉提示关键词选择代码，多个搜索引擎切换，点击搜索框下拉弹出热门关键词列表，点击进行快捷搜索功能。
案例效果图
源码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jQuery仿搜索引擎搜索框下拉提示代码</title> 6 7 <link rel="stylesheet" href="css/index.css"> 8 9 </head> 10 <body> 11 12 <div class="container"> 13 <div class="logo" style="background-image: url(img/baidu.png)"></div> 14 <div class="input"> 15 <input type="text" placeholder="请输入要搜索的内容" autocomplete="off" id="search-input"> 16 <div class="picker">百度</div> 17 <ul class="picker-list"> 18 <li style="background-image: url(img/ico_baidu.png)" data-logo="baidu.png">百度</li> 19 <li style="background-image: url(img/ico_sogou.png)" data-logo="sogou.png">搜狗</li> 20 <li style="background-image: url(img/ico_bing.png)" data-logo="bing.png">bing</li> 21 <li style="background-image: url(img/ico_google.ico)" data-logo="google.png">Google</li> 22 </ul> 23 <div class="hot-list"></div> 24 </div> 25 <div class="search"></div> 26 </div> 27 28 <script type="text/javascript" src="js/jquery.min.js"></script> 29 <script type="text/javascript" src="js/index.js"></script> 30 <script type="text/javascript"> 31 $(function(){ 32 helangSearch.init(); 33 }) 34 </script> 35 36 </body> 37 </html>
案例相关的css源码，js源码与图片
在学习过程中有什么不懂得可以加我的WEB前端学习交流扣扣qun，前面是133，中间868，后面是702。群里有不错的学习教程与开发工具、项目源码分享，专业的老师解答问题。与你分享web前端企业当下人才需求及怎么从零基础学习好web前端，和学习什么内容。