利用跨域写搜索（智能提示）

最新推荐文章于 2023-04-13 17:56:41 发布

fengGer的bugs

最新推荐文章于 2023-04-13 17:56:41 发布

阅读量300

点赞数

分类专栏：解决跨域文章标签： javascript跨域

本文链接：https://blog.csdn.net/qq_41224512/article/details/86635719

版权

解决跨域专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以淘宝为例

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			a{
				text-decoration:none ;
				color: #000;
			}
			form{
				width: 400px;
				height: 32px;
				margin: 10px auto;
			}
			input{
				float: left;
				border: 0;
				outline: 0;
			}
			#txt{
				width: 346px;
				height: 30px;
				border: 1px solid #ccc;
				border-radius: 10px 0 0 10px;
			}
			#btn{
				background: orange;
				width: 50px;
				height: 32px;
				color: #fff;
				border-radius: 0 12px 12px 0;
			}
			#list{
				width: 400px;
				margin: 0px auto;
				list-style:none ;
				border: 1px solid #ccc;
				display: none;
			}
		</style>
	</head>
	<body>
		<form>
			<input type="text" id="txt" placeholder="请输入关键字"/>
			<input type="button" name="btn" id="btn" value="搜索" />
		</form>
		<ul id="list"></ul>
		
		<script type="text/javascript">
			var oTxt = document.getElementById("txt");
			var oList = document.getElementById("list");
			oTxt.oninput = function() {
				oList.style.display="block";
				var oScript = document.createElement("script");
				oScript.src = "https://suggest.taobao.com/sug?code=utf-8&q=" + oTxt.value + "&callback=data&area=c2c";
				document.body.appendChild(oScript);
			}
			
			function data(data){
				//console.log(data);
				var data1 = data.result;
				var str="";
				data1.forEach((item)=>{
					str += "<li><a href='https:/s.taobao.com/search?q="+item[0]+"'>"+item[0]+"</a></li>";
				});
				oList.innerHTML = str;
				
			}
		</script>
	</body>

</html>