智能提示

function suggest(items) {
    let jsSuggest = document.querySelector(".js-suggest"),
        jsInputVal = document.querySelector(".js-input").value.trim(), // 移除两侧空白后的输入框中的值
        liEl = "", // 渲染的结构
        reg = ""; // 正则字符串
    // 清空ul
    jsSuggest.children[0].innerHTML = ""
    if (!jsInputVal) return jsSuggest.classList.add("hide");
    // 循环添加模糊匹配正则
    for (let i = 0; i < jsInputVal.length; i++) {
        // 匹配转义字符，特殊的转义字符需要加\\，例如\\*在转译为正则时会转为\*而不是*，*在正则中有特殊的表达意思
        if(/[\$\^\(\)\+\[\]\|\?\\\/\*\.]/.test(jsInputVal[i])){
            reg += '\\' + jsInputVal[i] + ".*?";
        }else {
            reg += jsInputVal[i] + ".*?";
        }
    }
    // 循环判断当前字符串是否匹配正则
    for (let index = 0; index < items.length; index++) {
      if (RegExp(reg).test(items[index])) {
        liEl += "<li>" + items[index] + "</li>";
      }
    }
    if (!liEl) return jsSuggest.classList.add("hide");
    jsSuggest.classList.remove("hide");
    jsSuggest.children[0].innerHTML = liEl;
}

function suggest(items) {
   let ul = document.getElementsByTagName('ul')[0];
        let jsSuggest = document.getElementsByClassName('js-suggest')[0];
        let jsInput = document.getElementsByClassName('js-input')[0];

        console.log(jsInput);

        let reg = '';
        let keyWord = jsInput.value.trim();
        
        //一共有12个特殊字符
        let special = ['(',')','.','[','{','|','\\','?','+','*','^','$'];
        keyWord.split('').forEach((s) => {
            if(special.includes(s)) {
                s = '\\' + s;
            }
          reg += `${s}.*?`;
        });
        reg = `^.*?${reg}$`;

        items = items.filter((item) => {
            console.log('拼接的正则',reg)
            console.log('匹配的内容',item)
            console.log('',new RegExp(reg).test(item))
          return keyWord.length != 0 && new RegExp(reg).test(item);
        });

        if (items.length != 0) {
          jsSuggest.classList.remove('hide');
          ul.innerHTML = '';
            console.log(jsInput.value,'进入')
          for (let i = 0; i < items.length; i++) {
                let liNew = document.createElement('li');
                console.log(liNew,'新节点')
                liNew.innerHTML = items[i];
                ul.appendChild(liNew);
          }
        } else {
          ul.innerHTML = '';
          jsSuggest.classList.add('hide');
        }
    
}

function suggest(items) {
    var inputEl = document.getElementsByClassName('input')[0];
    var inputVal = inputEl.value.trim();
    var suggestEl = document.getElementsByClassName('js-suggest')[0];
    var isHide = false;
    input.addEventListener('change', inputChange);
    var inputChange = function(e){
        inputVal = e.target.value.trim();
        var regStr = '';
        for(let i=0, arr=inputVal.split('');i<arr.length;i++){
            regStr += `${arr[i]}.*?`;
        }
        let reg = new RegExp(regStr, gi);
        var resItems = items.filter(item => reg.test(item));
        isHide = inputVal === '' || resItems.length === 0;
        if(isHide){
            let liEls = suggestEl.getElementsByTagName('li');
            for(let i=0;i<liEls.length-1;i++){
                suggestEl.children[0].removeChild(liEls[0]);
            }
            suggestEl.classList.add('hide');
        }else{
            suggestEl.classList.remove('hide');
            for(let i=0;i<resItems.length-1;i++){
                let li = document.createElement('li');
                li.innerText = resItems[i];
                suggestEl.children[0].appendChild(li);
            }
        }
    }
}