淘宝搜索框的实现-白红宇

淘宝搜索框的实现

阅读量：7015 次

发布时间：2019-06-28

本文共 2662 字，大约阅读时间需要 8 分钟。

实现淘宝搜索框的效果，首先得去淘宝找端口，然后对取到的数据进行处理。

淘宝搜索框的实现

就如图所示：

这样的数据有三层，对于数据的处理要特别注意

css代码：

#box{position: relative; margin: 30px 300px;}            *{margin: 0; padding: 0;}            #txt{width: 500px; height: 30px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; border: 1px solid red;}            #sou{width: 50px; height: 30px; border: 1px solid red; display: block; position: absolute; left: 496px; top: -5px; text-align: center; line-height: 30px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; background: red;}            #btn{ border: none; background: red; color: white;}            #list{width: 500px; border: 1px solid #CECECE; display: none;}            #list li{list-style: none;}            #list li:hover{background: #CECECE;}            #menu{position: absolute; top: 60px; left: 252px; background: #CECECE; width: 250px;}            #topMenu{width: 250px;}            #bottomMenu{width: 250px;}            span{width: 60px; height: 30px; border: 1px solid #000; display: block; float: left; margin: 5px; font-size: 12px; text-align: center; line-height: 30px; cursor: pointer;}            span:hover{background: red;}            a{text-decoration: none; color: #000; line-height: 30px;}

html代码：

JavaScript代码：

let oTxt = document.getElementById("txt");

let oList = document.getElementById("list");

let oMenu = document.getElementById("menu");

let oTop = document.getElementById("topMenu");

let oBot = document.getElementById("bottomMenu");

oTxt.oninput = function() {

var oScript = document.createElement("script");

oScript.src = "=" + oTxt.value + "&callback=jsonp&area=c2c";

document.body.appendChild(oScript);

document.body.removeChild(oScript);

}

function jsonp(data) {

//console.log(data)

data1 = data.result;

data2 = data.magic;

let str = "";

oList.innerHTML = "";

for(let i = 0; i < data1.length; i++) {

str += "<li><a href='=" + data1[i][0] + "'>" + data1[i][0] + "</a></li>";

}

//console.log(str);

oList.innerHTML = str;

oList.style.display = "block";

var aLi = oList.children;

for(let i=0; i
    
     "                        }                        oTop.innerHTML = str1;                        var str2 = "";                        for(var j = 0; j < data2[i].data[1].length; j++){                            str2 += "
     "+data2[i].data[1][j].title+""                        }                        oBot.innerHTML = str2;                        }                }        }

转载于:https://blog.51cto.com/13570197/2325576

你可能感兴趣的文章

第三代北斗芯片发布 2020年北斗计划向全球提供服务

查看>>

阿里巴巴集团CTO王坚:云计算让理想平等

查看>>

《中国人工智能学会通讯》——11.30 深度迁移学习

查看>>

Dell EMC扩充数据保护产品线 Data Domain增强云分层功能

查看>>

美柚社区精选：贴心宝妈的八大育儿经验

查看>>