原生js通过jsonp跨域-模拟搜索引擎

最新推荐文章于 2024-06-26 11:22:38 发布

莱恩-哈特

最新推荐文章于 2024-06-26 11:22:38 发布

阅读量328

点赞数 1

分类专栏：前端技术文章标签： jsonp 搜索引擎跨域

本文链接：https://blog.csdn.net/wangongda/article/details/73380763

版权

前端技术专栏收录该内容

89 篇文章 0 订阅

订阅专栏

效果还不错就差加上键盘控制了...

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>帅哥搜索</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			form {
				position: absolute;
				left: 50%;
				top: 40%;
			}
			
			form input:nth-child(1) {
				width: 450px;
				height: 34px;
				float: left;
				font-size: 16px;
				text-indent: 0.5em;
				outline: none;
				box-sizing: border-box;
			}
			
			form input:nth-child(1):focus {
				border: 1px solid blueviolet;
			}
			
			form input:nth-child(2) {
				height: 34px;
				float: left;
				background: blueviolet;
				cursor: pointer;
				width: 80px;
				letter-spacing: 2px;
				border: 0;
				font-size: 14px;
				line-height: 34px;
			}
			
			#oul {
				position: absolute;
				left: 0;
				top: 34px;
				background: white;
				width: 530px;
				box-shadow: 3px 3px 5px #F3F3F3;
				border: 1px solid #F3F3F3;
				box-sizing: border-box;
				display: none;
			}
			
			#oul li:hover {
				background: #F3F3F3;
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<form action="" method="" name="ss">
			<input type="" name="ss" id="txt" value="" />
			<input type="button" name="ss" id="btn" value="迷糊网罗" />
			<ul id="oul">
			</ul>
		</form>
		<script type="text/javascript">
			//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=&cb=&_=1497256697565
			//位置调整 习惯就好..
			var fm = document.getElementsByTagName('form')[0];
			var x = fm.offsetWidth;
			var y = fm.offsetHeight;
			fm.style.marginLeft = -x / 2 + 'px';
			fm.style.marginTop = -y / 2 + 'px';
			//获取操作元素
			var txt = document.getElementById("txt");
			var oul = document.getElementById("oul");

			//动态创建js脚本
			txt.onkeyup = function() {
				var value = this.value;
				var newscript = document.createElement("script");
				newscript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=walk&_=' + Math.random();
				newscript.type = 'text/javascript';
				document.body.appendChild(newscript);

			}
			//设置回调函数
			function walk(walkJson) {
				if(txt.value == 0) {
					oul.style.display = 'none';
				} else {
					oul.style.display = 'block';
					oul.innerHTML = '';
					if(walkJson.s.length <= 10) {
						for(var i = 0; i < walkJson.s.length; i++) {
							var oli = document.createElement('li');
							oli.style.height = 25 + 'px';
							oli.style.width = 100 + '%';
							oli.style.lineHeight = 25 + 'px';
							oli.style.textIndent = 9 + 'px';
							oli.style.listStyle = 'none';
							oli.innerHTML = walkJson.s[i];
							oul.appendChild(oli);
						}
						var lis = oul.getElementsByTagName('li');
						for(var i = 0; i < lis.length; i++) {
							lis[i].onclick = function() {
								var value = this.innerHTML;
								txt.value = value;
								oul.style.display='none';
							}
						}
					} else {
						for(var i = 0; i < 10; i++) {
							var oli = document.createElement('li');
							oli.style.height = 25 + 'px';
							oli.style.width = 100 + '%';
							oli.style.lineHeight = 25 + 'px';
							oli.style.textIndent = 9 + 'px';
							oli.style.listStyle = 'none';
							oli.innerHTML = walkJson.s[i];
							oul.appendChild(oli);
						}
						var lis = oul.getElementsByTagName('li');
						for(var i = 0; i < lis.length; i++) {
							lis[i].onclick = function() {
								var value = this.innerHTML;
								txt.value = value;
								oul.style.display='none';
							}
						}
					}
				}

			}
		</script>
	</body>

</html>

莱恩-哈特

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js通过jsonp跨域-模拟搜索引擎

效果还不错就差加上键盘控制了...代码如下：帅哥搜索 * { margin: 0; padding: 0; } form { position: absolute; left: 50%; top: 40%; } form input:nth-child(1) {
复制链接

扫一扫

专栏目录