题解 | #智能提示#

function suggest(items) {
    window.items=items;
    let input=document.getElementsByClassName('js-input')[0];
    input.addEventListener('input', onInput);
        // 此处有坑，测试用例用js直接更改的value属性，导致监听不到input，必须手动输入下一行
    // input.addEventListener('change', onInput);
    onInput({ target: input });

}
function onInput(e){
    let input=e.target.value.trim();
    //let reg=new RegExp(input,'g');
    let matchList=[];
    let reg = new RegExp(
    input
      .replace(/([\\\/\(\)\+\*\?\:\\[\]\^\$])/g, "\\$1")
      .replace(/(\\.)/g, "$1.*?")
  );//这个是难点：变量生成正则匹配，有点难
    if(!!input){
        items.forEach(v=>{
        if(reg.test(v)){
            matchList.push(v);
        }
    });
    }

    let div=document.getElementsByClassName('js-suggest')[0];
    let ul=div.children[0];

    if(matchList.length===0){
        div.classList.add('hide');
        ul.innerHTML='';
    }else{
        ul.innerHTML=matchList.map(v=>`<li>${v}</li>`).join('');
        div.classList.remove('hide');
    }

}