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>