<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结合朋友说的题目写来玩玩。
时间: 2024-10-12 22:46:53