jsonp模仿了得一个百度搜索框

最新推荐文章于 2018-11-03 20:22:03 发布

weixin_30786617

最新推荐文章于 2018-11-03 20:22:03 发布

阅读量133

点赞数

原文链接：http://www.cnblogs.com/zhujiasheng/p/6112934.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{margin: 0px;padding: 0px;}
	#sch{width:200px;margin: 50px auto;}
	#tex{width: 200px;height: 20px;}
	ul{border: 1px solid #eee;width: 202px;display: none;}
	ul li{list-style: none;border: 1px solid #ddd;width:200px;height: 20px;text-align: left;line-height: 20px;}
	ul li:hover{background: orange;}
	</style>
</head>
<body>
	<div id = 'sch'>
		<input type="text" placeholder='请输入关键字' id = 'tex'>
		<ul>
			<!-- <li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li> -->
		</ul>
	</div>
</body>
<script>
	var oTex = document.getElementById('tex');
	var oUl = document.getElementsByTagName('ul')[0];
	function baiduSU(data){
		var d = data.s
		if(d.length){
			oUl.style.display = 'block';
			var str = '';
			for(var i =0;i<d.length;i++)
		{
			str += '<li>'+d[i]+'</li>'
		}
		oUl.innerHTML = str;
		}else{
			oUl.style.display = 'none';
		}
	}



	oTex.onkeyup = function()
	{
		if(oTex.value != '')
		{
			var oScript = document.createElement('script');
			oScript.src = 'http://unionsug.baidu.com/su?wd='+oTex.value+'&cb=baiduSU';
			document.body.appendChild(oScript);
		}else{
			oUl.style.display = 'none';
		}
	}
</script>
</html>
来自：http://www.qdfuns.com/notes/36030/ab200b9276e550e91c7fedb9801dfd6f.html

转载于:https://www.cnblogs.com/zhujiasheng/p/6112934.html

weixin_30786617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp模仿了得一个百度搜索框

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin: 0px;padding: 0px;} #sch{width:200px;m...
复制链接

扫一扫