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前端，和学习什么内容。
经验首页