原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！

最新推荐文章于 2026-05-09 06:19:04 发布

原创最新推荐文章于 2026-05-09 06:19:04 发布 · 1.3w 阅读

52 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #数据

js 专栏收录该内容

3 篇文章

订阅专栏

闲来无事，用原生JS写了一个淘宝搜索框，用的淘宝的接口，可直接进行商品搜索。

写在前面： 1.记得引用jquery啊！

2.有人私信我说css样式不能用，那是因为复制代码的时候，有空格，只需要自己把css里的空格删除掉就好了，不过小伙伴们现在不用麻烦了，因为我已经优化过了，用代码段把代码包裹了，直接复制，在浏览器运行，就可以看到效果了

效果图如下：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#wrap{
		width: 612px;
		margin: 50px 300px;
		position: relative;
	}
	input{
		width: 460px;
		height: 42px;
		border: 5px solid red;
		float: left;
		outline: none;
		border-radius: 25px 0 0 25px;
		font-size: 18px;
		padding: 0 20px;
	}
	a{
		color: darkmagenta;
		text-decoration: none;
	}
	#list{
		width: 480px;
		position: relative;
		left: 25px;
		border: 1px solid #CECECE;
		display: none;
	}
	#list>li{
		/*height: 40px;*/
		padding: 0 10px;
		border-bottom: 1px solid #CECECE;
		list-style: none;
		line-height: 40px;
		cursor: pointer;
	}
	#list>li:last-child{
		border-bottom: none;
	}
	#list>li:hover{
		background: chartreuse;
	}
	#btn{
		float: left;
		height: 52px;
		width: 100px;
	    background: red;
		color: white;
		border: none;
		text-align: center;
		border-radius:0 25px 25px 0;
		cursor: pointer;
		outline: none;
		font-size: 20px;
	}
	.ul2{
		width: 250px;
		height:100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 10;
		background: #F6F9FC;
		box-sizing: border-box;
		padding-top: 20px;
		display: none;
	}
	#list>li:hover .ul2{
		display: block;
	}
	.ul2 .li2{
		margin: 5px;
		float: left;
		list-style: none;
		border: 1px solid #cecece;
		}
	.ul2 .li2 a{
		display: block;
		line-height: 30px;
		width: 60px;
		height: 30px;
		text-align: center;
		}
	.ul2 .li2:hover {
		background: red;
	}
	.ul2 .li2:hover a{
		color: white;
	}
	 .hover{
		color: red;
	}
	</style>
	</head>
	<body>

		<div id="wrap">
			<div style="overflow: hidden;">
				<input type="text" name="text" id="txt" value="" />
				<input type="button" name="btn" id="btn" value="搜索" />
			</div>
			<ul id="list"></ul>
		</div>
		<script type="text/javascript">
			let oTxt = document.getElementById("txt");
			let oList = document.getElementById("list");
			let oBtn = document.getElementById("btn");
			let src11 = "";

			oTxt.oninput = ()=>{
				oList.style.display = "block";
				let val = oTxt.value;
				var oScript = document.createElement("script");
				//
				oScript.src = "https://suggest.taobao.com/sug?code=utf-8&q="+val+"&callback=jsonp&area=c2c";
				document.body.appendChild(oScript);
			}

			function jsonp(data){
				/*console.log(data)
                            console.log(data.magic)*/
				data1 = data.result;
				data2 = data.magic;
				let str ="";
				for(let i = 0;i<data1.length;i++){
					str +="<li><a href='https://s.taobao.com/search?q="+data1[i][0]+"'>"+data1[i][0]+"</a></li>";
				}
				oList.innerHTML = str;
				console.log(str)
				//data.magic 数组,爆款的个数（箭头）有几个，数组长度就是多少
				//data.magic[j] 数组里是对象
				//data.magic[j].index 对象里的index属性，取得二级菜单
				//data.magic[j].data[m] 对象里的data属性，是一个数组
				//data.magic[j].data[m][k] data 里的    对象
				//data.magic[j].data[m][k].title 名字
				//data.magic[j].data[m][k].type 热卖

				if(data2){
					/*console.log(data2[0])//{index: "1", type: "tag_group", data: Array(3)}
                     console.log(data2.length)
                     console.log(data2[0].index)// 1
                     console.log(data2[0].data)  //[Array(2), Array(2), Array(6)]
                     console.log(data2[0].data[0])    //(2) [{…}, {…}]
                     console.log(data2[0].data[0][0].title) //{title: "短款"}
                      console.log(data2.length)*/

					//创建二级菜单的ul
					for(var j=0;j<data2.length;j++){
						var oUl = document.createElement("ul");
						oUl.className = "ul2";
						/*console.log([oList.children[data2[j].index-1]])*/

						//把ul放入对应的一级菜单li里，由于li没有，用oList.children
						oList.children[data2[j].index-1].appendChild(oUl);
						//在对应li中添加符号>
						//在有二级菜单的一级后面加个符号：为什么会是.children[0]是因为这个一级本身就有HTML内容节点，选中这个节点，以+=字符拼接上去；
						oList.children[data2[j].index-1].children[0].innerHTML += "&gt;";


						//遍历data2[0].data
						for(var m=0;m<data2[j].data.length;m++){
							//遍历data2[0].data[m]中的每一个数据
							for(var k=0;k<data2[j].data[m].length;k++){
								//创建二级菜单中的li
								let oLi = document.createElement("li");
								oLi.className = "li2";
								oUl.appendChild(oLi);
								//将li变为超链接，所以要创建a
								let oA = document.createElement("a");
								oLi.appendChild(oA);
								//选择路径，给到oA,使其能够跳转到相应的页面
								//console.log(data2[j].data[m][k].title)
								oA.href = "https://s.taobao.com/search?q="+data2[j].data[m][k].title;
								//将取到的数据显示在页面上，否则，页面上二级菜单的li里将会为空
								oA.innerHTML = data2[j].data[m][k].title;
								//给有type的添加类名，让字体变红， hover为任意的类名，不是划过
								if(data2[j].data[m][k].type){
									oA.className = "hover";
								}
							}
							oUl.innerHTML+="<br/><br/>"
						}
					}
				}
			}
			oBtn.onclick = function(){
				location.href = "https://s.taobao.com/search?q="+oTxt.value;
			}

		</script>
	</body>
</html>