题解 | #智能提示#

本来觉得自己字本地能写出个类似功能的就行了，但是看字节面试是用这个平台测的。而且自己测会忽略很多特殊的输入。

需要注意的地方

1. 测试代码中的ul是在调用suggest之前获取的，所以在suggest中清空ul就不能采用div直接remove ul的方式，而是老老实实一个一个remove掉li，当然，用jQuery的empty()会方便很多，但是题目中不让用第三方插件。
2. 构造匹配的正则表达式的时候，对输入的特殊字符要转义
3. input不为空的时候，记得要是没匹配到，要隐藏div

代码

function suggest(items) {
    let ipt = document.querySelector('.js-input').value;
    let dv = document.querySelector('.js-suggest');
    let ul = document.querySelector('ul');
    let len = ul.children.length;
    // console.log('len', len);

    // 清空ul
    for (let i = 0; i < len; i++) {
        let li = document.querySelector('li');
        ul.removeChild(li);
    }
    // console.log(ul.children.length);

    ipt = ipt.trim();
    // 输入为空
    if (!ipt) {
        dv.classList.add('hide');
        return;
    }

    // 构造reg的时候，ipt如果是特殊字符，要转义
    let reg = '';
    const regKey = ['(', ')', '.', '?', '^', '/', '\\', '*', '[', ']', '|', '+', '{', '}', '$'];
    console.log(regKey.length);
    for (i of ipt) {
        if (regKey.includes(i)) {
            i = '\\' + i;
        }
        reg += i +'.*?';
    }
    // console.log(reg);
    reg = new RegExp(reg);

    // 匹配
    for (i of items) {
        if (reg.test(i)) {
            let tip = document.createElement('li');
            tip.innerHTML = i;
            ul.appendChild(tip);
        }
    }
    dv.appendChild(ul);

    // 要考虑ipt不为空但是没有匹配到
    if (ul.children.length){
        dv.classList.remove('hide');
    } else {
        dv.classList.add('hide');
    }
}