//selut 输入要查询的输入框 //Array要查询的数据,conent要放进的容器 // selut input标签class名或id class SelectFrom{ constructor(Array,conent,selut){ this.Array=Array; this.conent=conent; this.selut=selut; } SelectData(){ var that=this; let arr=[]; $(that.conent).html("");//一开始进去你要搜索的内容是空的因为值你还没放进去,如果不清空会导致你搜索是出来的值就会叠加 if(that.Array.length!=0){ let num=$(that.selut).val(); for(let j=0;j<that.Array.length;j++){ for(var i=0;i<that.Array[j].length;i++){ if(that.Array[j][i].indexOf(num)!==-1){ arr.push([that.Array[j][0],that.Array[j][1]]) let htmlTetx='<li aid='+that.Array[j][0]+' class="li_shop" >'+that.Array[j][1]+'</li>'; $(this.conent).append(htmlTetx) } } } } if(arr.length<=12){ $(that.conent).css("height","auto") } } selectRetreat(){ var that=this; let arr=[]; const oEvent = window.event; if (oEvent.keyCode == 8) { if(that.Array.length!=0){ setTimeout(()=>{ $(that.conent).html(""); var num=$(that.selut).val(); if(num!==""){ for(var j=0;j<that.Array.length;j++){ for(var i=0;i<that.Array[j].length;i++){ console.log(that.Array[j][i]) if(that.Array[j][i].indexOf(num)!==-1){ console.log(that.Array[j][0]+","+that.Array[j][1]) arr.push([that.Array[j][0],that.Array[j][1]]) let htmlTetx='<li aid='+that.Array[j][0]+' class="li_shop" >'+that.Array[j][1]+'</li>'; $(that.conent).append(htmlTetx) } } } }else{ const str=new Set(that.Array); const newArray=[...str]; for(let j=0;j<newArray.length;j++){ let htmlTetx='<li aid='+newArray[j][0]+' class="li_shop" >'+newArray[j][1]+'</li>'; $(that.conent).append(htmlTetx) } } },100) } $(that.conent).css("height","400px") } } } //按下退格键在查询值 document.onkeydown =()=> { var selectDatat=new SelectFrom(arry,".ul_shop",".query_name"); selectDatat.selectRetreat(); } //按下搜索键在查询 $(".query_name").on('keyup',function(){ var selectDatat=new SelectFrom(arry,".ul_shop",".query_name"); selectDatat.SelectData(); })
es6 Class类实现类似百度搜索
最新推荐文章于 2022-06-15 12:10:03 发布