web前端学习教程，jQuery仿搜索引擎搜索框下拉提示源码

程序员文章站 2022-07-01 13:44:01

jQuery仿搜索引擎搜索框下拉提示关键词选择代码，多个搜索引擎切换，点击搜索框下拉弹出热门关键词列表，点击进行快捷搜索功能。 ......

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前端学习教程，jQuery仿搜索引擎搜索框下拉提示源码

在学习过程中有什么不懂得可以加我的web前端学习交流扣扣qun，前面是133，中间868，后面是702。群里有不错的学习教程与开发工具、项目源码分享，专业的老师解答问题。与你分享web前端企业当下人才需求及怎么从零基础学习好web前端，和学习什么内容。

上一篇： vue实现组件切换的两种方式

下一篇：页面体验优化-图片预览以及上传显示进度