搜索功能demo

代码如下:

 1 <html>
 2 <head>
 3     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 4     <meta content="text/html; charset=utf-8" http-equiv="content-type" />
 5     <title>bing search</title>
 6     <style type="text/css">
 7     body{background-color: #333;}
 8     .bg-div{position:relative;background-image: url(river.jpg);width:1228px;height:690px;margin: 0 auto;}
 9     .logo{background-image: url(logo.png);height:53px;width: 107px; float: left;margin: -4px 18px 0 0;}
10     .search-form{float: left; background-color: #fff;padding:5px;}
11     .search-text{height:25px;line-height: 25px;float: left;width: 350px;border: 0;outline: none;}
12     .search-button{background-image: url(search-button.png);width:29px;height:29px;float: left;border: 0}
13     .search-box{position:absolute;top:150px;left: 200px; }
14     .suggest{width:388px; background-color:#fff;position:absolute;margin:0;padding:0;border-width:1px;border-style:solid;border-color: #999;}
15     .suggest ul{list-style:none;display:block;margin:0;padding:0}
16     .suggest ul li {padding:3px;line-height:25px;font-size: 14px;color: #777;cursor: pointer;padding:3px;}
17     .suggest ul li:hover{background-color:#e5e5e5;text-decoration: underline;}
18     .suggest strong{color:#000;}
19     .clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0px;}
20     .clearfix{zoom:1}
21     
22     .nav{margin:0 auto; width:1228px;}
23     .nav ul{list-style:none;margin:0;padding:0;}
24     .nav ul li{float:left;padding:10px;}
25     .nav ul li a{color:#999; text-decoration:none;font-size:12px; font-weight:bold;}
26     a:hover {text-decoration: underline;}
27     </style>
28 </head>
29 
30 <body>
31 <div class="nav">
32 <ul class="clearfix">
33     <li><a href="#">图片</a></li>
34     <li><a href="#">视频</a></li>
35     <li><a href="#">词典</a></li>
36     <li><a href="#">咨询</a></li>
37     <li><a href="#">地图</a></li>
38     <li><a href="#">影响力</a></li>
39     <li><a href="#">更多</a></li>
40 </ul>
41 </div>
42  <div class="bg-div">
43      <div class="search-box">
44      <div class="logo"></div>
45      
46          <form class="search-form" action="https://cn.bing.com/search" target="_blank" id="search-form">
47              <input type="text" class="search-text" name="q" id="search_input" autocomplete="off"/>
48              <input type="submit" class="search-button" value=""/>
49          </form>
50 
51      </div>
52  </div>
53  <div class="suggest" id="search-suggest" style="display:none">
54                 <ul id="search-result">
55                     <li> 搜索内容 </li>
56                     <li> 搜索内容 </li>
57                 </ul>
58 </div>
59  <script src="js/jquery-1.10.2.min.js"></script>
60  <script>
61  $('#search_input').bind('keyup',function(){
62     var jqueryInput = $(this);
63     var searchText = jqueryInput.val();
64     $.get('http://api.bing.com/qsonhs.aspx?q='+searchText);
65  });
66 $('#search-suggest').css({
67     top:$('#search-form').offset().top+$('#search-form').height()+10,
68     left:$('#search-form').offset().left
69 }).show();
70 
71  </script>
72 </body>
73 </html>

效果图如下:

搜索功能demo_第1张图片

 

你可能感兴趣的:(搜索功能demo)