仿照百度搜索下拉框功能

2020-05-01
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #txt {
            width: 150px;
        }
        p{
            margin: 10px 0 0 0;
            padding: 0;
            height: 18px;
            line-height: 18px;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="box">
    <input type="text" name="txt" id="txt">
    <input type="button" value="搜索">
</div>

<script>
    // 假设为后台返回的数据
    let data = [
        'php是什么',
        '美媒称彭斯"控制"疫情信息发布,要求"统一口径"',
        '美媒揭露美国中央情报局监视100多个国家',
        '依法统筹推进疫情防控和经济社会发展',
        '打好疫情阻击战  求助  辟谣'
    ];

    // 给输入框添加键盘抬起事件
    document.getElementById("txt").onkeyup = function () {
        // 删掉已经添加过的元素
        if(document.getElementById('mydiv')){
            document.getElementById('box').removeChild(document.getElementById('mydiv'));
        }
        // 获取输入框的值
        let val = this.value;
        console.log(val);
        if (val === '') {
            return;
        }
        // 匹配到的值
        let mats = [];
        for (let i = 0; i < data.length; i++) {
            if (data[i].indexOf(val) === 0) {
                mats.push(data[i]);
            }
        }
        console.log(mats);
        if (mats.length === 0) {
            return;
        }
        // 创建元素
        let div = document.createElement('div');
        div.style.width = '150px';
        div.id = 'mydiv';
        for (let i = 0; i < mats.length; i++) {
            let p = document.createElement('p');
            p.innerText = mats[i];
            div.append(p);
        }
        // 添加至box元素
        document.getElementById('box').append(div);
    }

</script>
</body>
</html>