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结合朋友说的题目写来玩玩。

 

转载于:https://www.cnblogs.com/wx10086/p/7354982.html