web前端學習教程，jQuery仿搜索引擎搜索框下拉提示源碼

時間 2019-11-08

標籤 web 前端學習教程 jquery 搜索引擎搜索下拉提示源碼欄目 HTML 简体版

原文原文鏈接

jQuery仿搜索引擎搜索框下拉提示關鍵詞選擇代碼，多個搜索引擎切換，點擊搜索框下拉彈出熱門關鍵詞列表，點擊進行快捷搜索功能。javascript

案例效果圖css

源碼html

 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>