jquery+ajax+jsop模仿必应搜索框

不废话了，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>  
        body{background: #333;}  
        #bg_div{  
            position: relative;  
            width:1300px;height:690px;  
            margin:0 auto;  
        }  
        #search_box{  
            position: absolute;  
            top:150px;  
            left: 200px;  
        }  
        #logo{  
            background-image: url("images/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(images/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> 
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$('#search_input').on('keyup',function(){
        var searchText=$(this).val();
        var getdata = function (data) {
        	var d = data.AS.Results[0].Suggests;
        	var 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();
        })

		$('#suggest').delegate('li','click',function() {
			var keyword = $(this).text();
			location.href='http://cn.bing.com/search?q='+keyword; 
		})
	})
</script>
</body>
</html>
实现的效果
jquery+ajax+jsop模仿必应搜索框

猜你喜欢
