标签:ext == i++ innerhtml logs cti document value hold
<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结合朋友说的题目写来玩玩。
标签:ext == i++ innerhtml logs cti document value hold
原文地址:http://www.cnblogs.com/wx10086/p/7354982.html