jsonp跨域实现仿百度搜索提示

最新推荐文章于 2022-04-17 09:05:53 发布

luck_lin

最新推荐文章于 2022-04-17 09:05:53 发布

阅读量456

点赞数

分类专栏： javascript 文章标签： jsonp 仿百度搜索 jsonp跨域

本文链接：https://blog.csdn.net/qwe502763576/article/details/79290961

版权

javascript 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input id="txt" type="text" name=""><button id="search">SEARCH</button><br/>
	<div id="box" style="width:170px;"></div>
	<!-- https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E5%95%8A&cb=handle -->
<script type="text/javascript" src="../tool.js"></script>
<script type="text/javascript">
	on($("#txt"), "keyup", function(){
		var _url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=handle";
		var _script = document.createElement("script");
		_script.src = _url;
		$("body")[0].appendChild(_script);
		_script.remove();

	})
	
	function handle(data){/*jsonp回调函数*/
		var html = "";
		data.s.forEach(function(v){
			html += `<div class="child">${v}</div>`;
		})
		$("#box").innerHTML = html;
	}
	on($("#box"), "mouseover", function(e){/*移入改变背景增效+点击实现跳转*/
		e = e || event;
		var src = e.srcElement || e.target;
		if(src.className === "child"){
			var children = $(".child", $("#box"));
			for(let i = 0; i < children.length; i++){
				children[i].style.background = "initial";
			}
			src.style.background = "#ccc";
			src.style.cursor = "default";
			on(src, "click", function(){
				open("https://www.baidu.com/s?wd=" + this.innerHTML);
			})
		}
	})
	on($("#search"), "click", function(){/*点击搜索按钮实现跳转*/
		open("https://www.baidu.com/s?wd=" + $("#txt").value);
	})
</script>
</body>
</html>

luck_lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jsonp跨域实现仿百度搜索提示

Document SEARCH on($("#txt"), "keyup", function(){ var _url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=handle"; var _script = document.createElement
复制链接

扫一扫