码迷,mamicode.com
首页 > Web开发 > 详细

js模糊匹配

时间:2017-08-13 22:15:39      阅读:454      评论:0      收藏:0      [点我收藏+]

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

 

js模糊匹配

标签:ext   ==   i++   innerhtml   logs   cti   document   value   hold   

原文地址:http://www.cnblogs.com/wx10086/p/7354982.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!