es6 Class类继承实现类似百度搜索

//selut 输入要查询的输入框

//Array要查询的数据，conent要放进的容器

// selut input标签class名或id


class SelectFrom{
    constructor(Array,conent){
        this.Array=Array;
        this.conent=conent;
    }
}


class InheritData extends SelectFrom{
    constructor(Array,conent,selut){
        super(Array,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 InheritData(arry,".ul_shop",".query_name");
    selectDatat.selectRetreat();
}
//按下搜索键在查询
$(".query_name").on('keyup',function(){
    var selectDatat=new InheritData(arry,".ul_shop",".query_name");
    selectDatat.SelectData();
})//selut 输入要查询的输入框

//Array要查询的数据，conent要放