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

最新推荐文章于 2023-12-19 10:57:38 发布

原创最新推荐文章于 2023-12-19 10:57:38 发布 · 340 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript跨域

解决跨域专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML, CSS和JavaScript实现的淘宝搜索建议功能。通过监听输入框的输入事件，动态加载并显示与输入关键字相关的搜索建议。此功能增强了用户体验，使用户能够更快地找到他们想要的商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以淘宝为例

<!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>