JSONP跨域引用百度搜索库

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#q{
				width: 300px;
				height: 30px;
				padding: 5px;
				border: 1px solid #f90;
				font-size: 16px;
			}
			#ul1{
				border: 1px solid #f90;
				width: 310px;
				margin: 0;
				padding: 0;
				display: none;
			}
			li a{
				line-height: 30px;
				padding: 5px;
				text-decoration: none;
				color: black;
				display: block;
			}
			li a:hover{
				background: #f90;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<input type="text" name="" id="q" value="" />
		<ul id="ul1">
			<!--<li>
				<a href="javascript:;">文字1</a>
			</li>
			<li>
				<a href="javascript:;">文字2</a>
			</li>
			<li>
				<a href="javascript:;">文字3</a>
			</li>
			<li>
				<a href="javascript:;">文字4</a>
			</li>-->
		</ul>
		<script type="text/javascript">
			var oQ=document.getElementById('q');
			var oUl=document.getElementById('ul1');
			
			oQ.οnkeyup=function(){
				if(this.value !=''){
					var oScript = document.createElement('script');
					oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=fn';
					document.body.appendChild(oScript);
				}else{
					oUl.style.display = 'none';
				}
			}
			
			function fn(data){
				var html = '';
				if(data.s.length){
					oUl.style.display = 'block';
					for (var i=0; i<data.s.length; i++) {
						html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
					}
					oUl.innerHTML = html;
				}else{
					oUl.style.display = 'none';
				}
			}
		</script>
	</body>
</html>

  

转载于:https://www.cnblogs.com/yangxue72/p/8328824.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值