闲来无事，用原生JS写了一个淘宝搜索框，用的淘宝的接口，可直接进行商品搜索。
效果图如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝搜索</title>
<style type="text/css">
body,ul,li{
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;
/*z-index: -1;*/
}
#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;
/*box-sizing: border-box;*/
list-style: none;
/*background: red;*/
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="txt" 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 += ">";
//遍历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>