模擬百度搜尋

小丑八怪發表於2019-05-06
<!-- 總體思路：使用者在文字框裡輸入的是什麼，就來陣列中遍歷每個元素，找輸入的內容是否在遍歷到的元素裡面，如果在，就把這個元素做成li標籤加到ul裡，如果不在就不操作
 怎麼判斷在不在字串裡？
xxx.indexOf(內容) != -1
onkeyup事件：
鍵盤彈起時會觸發的事件
    -->    
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        body {
            font-size: 20px;
        }
 
        .box {
            width: 600px;
            height: 40px;
            margin: 200px auto;
            position: relative;
        }
 
        #txt {
            width: 498px;
            height: 38px;
            border: 1px solid #eee;
            font-size: 20px;
        }
 
        #search {
            width: 100px;
            height: 40px;
        }
 
        #keywords {
            position: absolute;
            top: 40px;
            left: 0;
            background-color: rgb(12, 255, 24);
            list-style: none;
            width: 500px;;
        }
 
        li {
            line-height: 24px;
        }
 
        /*/!*是li標籤，並且滑鼠移入的時候變紅*!/*/
        /*li:hover {*/
 
        /*background-color: red;*/
        /*}*/
    </style>
</head>
<body>
 
 
<div class="box">
    <div class="top">
        <input type="text" id="txt"/><input type="button" value="search" id="search"/>
    </div>
    <ul id="keywords"></ul>
</div>
 
 
<script>
    //查詢使用者輸入的關鍵字，就來這個陣列找
    var keywords = ["zhongqiulan", "linda為什麼很黑", "who are linda",  "廣東人", "廣東人愛吃", "廣東人愛吃福建人", "林丹的生平", "JavaScript", "Java", "王思聰", "王健林", "社會王", "隔壁老王", "班長以前為什麼頭髮長", "aaaa", "hhhh", "cccc"];
    //找到顯示結果的ul
    var ul = document.getElementById("keywords");
    //找到文字框
    var txt = document.getElementById("txt");
    //給文字框加鍵盤彈起事件（當使用者在文字框裡按鍵盤上的任意鍵並彈起時觸發）
    txt.onkeyup = function () {
        //事件剛剛觸發就先清空上一次的結果（其實就是把ul清空）
        ul.innerHTML = "";
        //拿到使用者輸入的內容  this是文字框
        var str = this.value;
        //如果拿到空字串，就不要執行下面的程式碼
        if (str == "") {
            return;
        }
        //遍歷陣列，拿到所有結果
        for (var i = 0; i < keywords.length; i++) {
  //判斷當前某一個結果裡是否包含使用者輸入的內容
            if (keywords[i].indexOf(str) != -1) {
 
                //把當前結果做成li標籤
                var li = document.createElement("li");
                li.innerHTML = keywords[i];
 
                //新增到ul裡顯示
                ul.appendChild(li);
  //每建立一個li標籤就加一個滑鼠移入事件
                li.onmouseover = function () {
                    this.style.backgroundColor = "red";
                }
                //滑鼠移出時把被移出的li顏色清空
                li.onmouseout = function () {
                    this.style.backgroundColor = "";
                }
                //給每個li加點選事件
                li.onclick = function () {
                    //要拿到被點選的li標籤的內容
                    //再把內容賦值給文字框
                    txt.value = this.innerHTML;
                    ul.innerHTML = "";
                }
            }
        }
    };
</script>
</body>
</html>複製程式碼

相關文章