模拟百度搜索

重点：
1.创建元素，添加元素，移除元素 document.createElement(“p”) 上级名.removeChild(删除的元素名); 添加到的元素名例（arr数组等）.push(追加元素)
2.判读获取文本框内容与数组对比 indexOf()
3.判断元素是否为空不为空删除
4.遍历数组

Html

<div class="box">
    <input type="text" class="txt">
    <input class="btn" type="submit" value="搜索">
</div>

Css

* {
    padding: 0;
    margin: 0;
}

.box {
    position: relative;
    left: 50%;
    top: 200px;
}

.txt {
    width: 300px;
    height: 30px;
}

.btn {
    width: 100px;
    height: 35px;
    border: 1px solid #000;
    background-color: #fff;
}

p {
    margin: 5px 0;
}

js

// 获取数据
let box = document.querySelector(".box");
let txt = document.querySelector(".txt");
let btn = document.querySelector(".btn");

// 数组记录数据
// 本应后台获取
// 前端测试用数组代替
let keyWords = ["我是你爸爸", "我是你爸爸", "我是你爸爸", "我是你爸爸", "我的你爸爸", "儿子","小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "传智播客是一个培训机构", "传说在传智有个很帅很纯洁的小杨", "苹果好吃", "苹果此次召回还是没有中国"];

// 文本框键盘抬起函数
txt.onkeyup = function () {

    // 判断是否有新创建id为obj的div元素，有就清除
    if ((document.querySelector("#obj"))) {
        box.removeChild((document.querySelector("#obj")));
    }
    
    // 定义现在文本框的内容
    let text = this.value;
    // 临时数组记录数据
    let arr = [];
    for (let i = 0; i < keyWords.length; i++) {
        // 是否是最开始出现
        if (keyWords[i].indexOf(text) == 0) {
            arr.push(keyWords[i]); //追加到临时数组
        }
    }
    
    // 判断文本框或者临时数组为空时，在判断创建id为obj的div元素，有就清除，并且停止后面的代码运行
    if (this.value.length == 0 || arr.length == 0) {
        if ((document.querySelector("#obj"))) {
            box.removeChild((document.querySelector("#obj")));
        }
        return;
    }

    // 创建div，加入到box中
    let obj = document.createElement("div");
    // 添加到类名为box的div中
    box.appendChild(obj);
    // 设置id为obj
    obj.id = "obj";
    // 设置样式
    obj.style.width = "300px";
    obj.style.border = "1px solid red";
    
    // 循环遍历临时数组，并创建p标签输出数组的内容
    for (let i = 0; i < arr.length; i++) {
        let p = document.createElement("p");
        obj.appendChild(p);
        p.innerText = arr[i];
        
        // 定义p标签的鼠标进入和离开事件，改变背景颜色
        p.onmouseover = function () {
            this.style.backgroundColor = "yellow";
        }
        p.onmouseout = function () {
            this.style.backgroundColor = "";
        }
    }
}

效果