js模糊匹配 - wxx10086

js模糊匹配

<div>
        <input type="text" placeholder="请输入..." id="input"/><button>搜索</button>
        <ul id="inputInfo"></ul>
   </div>

let search = []
    let list = \'\'
    var inputArr = []
    document.getElementById(\'input\').oninput = function(){
        let that = this
        console.log(that.value)

        if(inputArr.length==0){
            inputArr.push(that.value)
        }else{
            inputArr.indexOf(that.value)==-1?inputArr.push(that.value):\'\'
            inputArr.length>10?inputArr.shift():\'\'
        }


        if(that.value == \'\'){
            search = []
            document.getElementById(\'inputInfo\').innerHTML = \'\'
        }else{
            let num = 0
            search = []
            for(let i= 0;i<inputArr.length;i++){
                if(inputArr[i].indexOf(that.value)!=-1){
                    search.push(inputArr[i])
                }else{
                    num++
                }
            }
            if(num==inputArr.length){
                search = []
                document.getElementById(\'inputInfo\').innerHTML = \'\'
            }else{
                for(let i = 0;i<search.length;i++){
                    list +=\'<li>\'+search[i]+\'</li>\'
                }
                document.getElementById(\'inputInfo\').innerHTML = list
                search = []
                list = \'\'
            }
        }
        //添加点击事件
        let lis = document.querySelectorAll(\'#inputInfo li\')
        for(let i = 0;i<lis.length;i++){
            lis[i].onclick = function () {
                document.getElementById(\'input\').value = this.innerHTML
                search = []
                list = \'\'
                document.getElementById(\'inputInfo\').innerHTML = list
            }
        }
    }

 

iviewui的模糊匹配用着不称手，同事修改了一下，但是感觉还是好麻烦。。但是目前还有摸透vue所以用js结合朋友说的题目写来玩玩。