DOM应用——仿百度搜索

html结构代码

<div id="myDiv">
    <input type="text" id="myInput">
    <button>搜索</button>
</div>

css样式代码

<style>
        #myInput{
            outline: none;
        }
        #myP{
            padding: 0;
            margin: 0;
            padding-left: 5px;
            line-height: 22px;
            font-size: 14px;
            cursor: pointer;
        }
        #myP:hover{
            background-color: palevioletred;
        }
    </style>

js代码

<script>
    function myId(id) {
        return document.getElementById(id);
    }
    var myArr=["今天好冷","今天风真大","今后不能懒了","去外面吹吹风","去吃好吃的"];
    //键盘抬起事件
    myId("myInput").onkeyup=function () {
        if(myId("myList")){
            myId("myDiv").removeChild(myId("myList"));
        }
        
        var text=this.value;//获取输入框的文本值
        var tempArr=[];//临时数组存放满足条件的字符串

        for(let i=0;i<myArr.length;i++){
            //该文本内容在字符串中是最开始出现
            if(myArr[i].indexOf(text)==0){
                tempArr.push(myArr[i]);
            }
        }

        //如果文本框是空或者临时数组是空，不用创建div
        if( this.value.length==0||tempArr.length==0){
            // 如果页面中有div，则删除
            if(myId("myList")){
                myId("myDiv").removeChild(myId("myList"));
            }
            return;//退出当前函数
        }

        // 创建一个div
        var myList=document.createElement("div");
        myId("myDiv").appendChild(myList);
        myList.id="myList";//添加一个id属性
        myList.style.width="173px";
        myList.style.border="1px solid pink";

        // 循环遍历临时数组，创建对应的p标签
        for(let i=0;i<tempArr.length;i++){
            var pObj=document.createElement("p");
            myList.appendChild(pObj);
            pObj.id="myP";
            pObj.innerHTML=tempArr[i];
        }
    }
</script>