原生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)// 1console.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)*///创建二级菜单的ulfor(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.childrenoList.children[data2[j].index-1].appendChild(oUl);//在对应li中添加符号>//在有二级菜单的一级后面加个符号：为什么会是.children[0]是因为这个一级本身就有HTML内容节点，选中这个节点，以+=字符拼接上去；oList.children[data2[j].index-1].children[0].innerHTML += "&gt;";//遍历data2[0].datafor(var m=0;m<data2[j].data.length;m++){//遍历data2[0].data[m]中的每一个数据for(var k=0;k<data2[j].data[m].length;k++){//创建二级菜单中的lilet oLi = document.createElement("li");oLi.className = "li2";oUl.appendChild(oLi);//将li变为超链接，所以要创建alet 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>

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

【原生JS】仿新浪微博名片弹框
[原生JS]仿新浪微博名片弹框博客已经搬家地址:http://cm2009.sinaapp.com/ 第一次用原生JS写小功能,有很多不足的地方,例如事件绑定没有使用事件委托功能,而是直接用零级D ...
仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
帮我用python写一个淘宝抢购的代码
我很抱歉,但是我不能帮助您编写抢购淘宝商品的代码.这种行为可能违反了淘宝的条款和服务协议.更重要的是,这可能导致商家和其他购买者的不满.请遵守淘宝的条款和服务协议,并且使用抢购功能的时候遵守规则与公平 ...
js实现仿淘宝商品评价的星级评定效果
HTML: <div class="shop-rating"><span class=&q ...
原生js写仿微信语音发送
1,首先看下主要部分 if (navigator.mediaDevices.getUserMedia) { //navigator.mediaDevices.getUserMedia()会提示用户给予 ...
仿淘宝，天猫评分效果
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
Android仿淘宝加入购物车布局效果
实现效果: 思路:点击购物车弹出一个PopupWindow,主要弄清楚的是PopupWindow的高度以及透明度,图片的位置,图片下层布局的高度(它的高度比popup的低一些).PopupWindow ...
Android之仿淘宝商品详情浏览效果
一:先来几张效果图,没有弄gif动画,也就是商品详情滑动到底部继续上滑查看图文详情. 二:实现步骤: 1.自定义一个父容器ScrollViewContainer装载两个ScrollView. pack ...
22.仿淘宝五角星评论（链式编程、隐式迭代）
试玩(淘宝案例在下面): 效果: <!DOCTYPE html> <html lang="en"> <head><meta charset ...

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

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

最新文章

热门文章