原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！ |
您所在的位置：网站首页 › dw搜索框代码怎么写 › 原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！ |
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
|
闲来无事，用原生JS写了一个淘宝搜索框，用的淘宝的接口，可直接进行商品搜索。 写在前面： 1.记得引用jquery啊！ 2.有人私信我说css样式不能用，那是因为复制代码的时候，有空格，只需要自己把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; } 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 |
【本文地址】