慕课网-必应搜索框课程源码

最新推荐文章于 2022-03-23 17:29:27 发布

Dseai_

最新推荐文章于 2022-03-23 17:29:27 发布

阅读量945

点赞数

本文链接：https://blog.csdn.net/dseai_/article/details/70255472

版权

gtihub源码地址 https://github.com/Dseai/BingSearchDemo

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>bing Search</title>
	<style>
        body{background: #333;}
        #bg_div{
            position: relative;
            background-image: url("bg.jpg");
            width:1300px;height:690px;
            margin:0 auto;
        }
        #search_box{
            position: absolute;
            top:150px;
            left: 200px;
        }
        #logo{
            background-image: url("logo.png");
            height:53px;width: 107px;
            float: left;
            margin: -4px 18px 0 0;
        }
        #search_form{
            background-color: #fff;
            float: left;
            padding: 5px;
        }
        #search_input{
        	font-size: 20px;
            height:29px;
            line-height: 29px;
            width: 350px;
            border: 0;
            outline: none;
            float: left;
        }
        #search_submit{
            background-image: url(search-button.png);
            width:29px;
            height:29px;
            border: 0;
        }
        #suggest{
            display: none;
            width:388px;
            background-color:#fff;
            position:absolute;
            border-width:1px;
            border-style:solid;
            border-color: #999;
            padding: 0;
            margin: 0;
        }
        #suggest_result{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        #suggest_result li{
            padding:3px;line-height:25px;font-size: 14px;color: #777;
            cursor: pointer;
        }
        #suggest_result li:hover{
            background-color:#e5e5e5;;
        }
    </style>
</head>
<body>
<div id="bg_div">
	<div id="search_box">
		<div id="logo"></div>
		<form  id="search_form" action="https://cn.bing.com/search" target="_blank">
			<input type="text" id="search_input" name="q">
			<input type="submit" id="search_submit" value="">
		</form>
	</div>
	
</div>
<div id="suggest">
	<ul id="suggest_result">
	</ul>
</div>
<!-- 以下方法为jquery实现 ajax请求 使用jsonp方法实现跨域 -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script type="text/javascript">
  jQuery(document).ready(function() {
   $('#search_input').on('keyup',function(){
  		var searchText=$(this).val();
		var getdata=function (data){
		var d = data.AS.Results[0].Suggests;
        var html = "";
        // 将从服务器拿到的数据拼接成完整的html标签
        for (var i = 0; i < d.length; i++) {
             html += '<li>' + d[i].Txt + '</li>';
         }
		$('#suggest_result').html(html);
		$('#suggest').css({
		  	top:$('#search_form').offset().top+$('#search_form').height()+10,
		  		left:$('#search_form').offset().left
		  		//position:'absolute'
		  		}).show();
			};
    $.ajax({
    	type:"GET",
    	url:"http://api.bing.com/qsonhs.aspx?type=cb&cb=getdata&q=" +searchText,
    	dataType: "jsonp",
    	async:false,
    	jsonp: "getdata",
    	jsonpCallback: "getdata",
	    success: function (data) {
	          getdata(data);
	       }
        });
    });
  	// 用户点击其他位置搜索框消失 提高用户体验
  $(document).on('click',function(){
  	$('#suggest').hide();
  });
  // 事件代理 同事给多个元素绑定事件 并且这些节点是通过js动态生成的一般会用事件代理
  //jquery的delegate()方法
  // delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数
  //使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
    $('#suggest').delegate('li','click', function () {  
            var keyword=$(this).text();  
           location.href='http://cn.bing.com/search?q='+keyword;  
        });  
    }); 
</script>
</body>
</html>

Dseai_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
慕课网-必应搜索框课程源码

bing Search body{background: #333;} #bg_div{ position: relative; background-image: url("bg.jpg"); width:1300px;height:690px; margin:0
复制链接

扫一扫