JS Fuzzy Matching

<div> <input type= "text" placeholder= "Please enter ..." id= "input"/><button> search </button> <ul Id= "Inputinfo" ></ul> </div>Let search=[] Let list= ' 'varInputarr =[] document.getElementById (' input '). Oninput =function() { let that= ThisConsole.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= 0Search= []             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= ' '            }        }        //Add a Click eventLet 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's fuzzy matching is not called hand, colleague modified a bit, but the feeling is still good trouble. But at present there is a well-read Vue so use JS combined with friends to write the topic to play.

JS Fuzzy Matching