JS---DOM---案例：模擬百度搜索框-有解無憂

模擬百度搜索框

我的思路整理：

1. 注冊文本框抬起事件(onkeyup)

2. 處理函式：

--->創建臨時陣列，回圈遍歷文本框鍵入的文字內容和keywords陣列，用keyWords[i].indexOf(text) == 0 來判斷，true就追加進臨時陣列tempArr.push(keyWords[i])

--->bug修復：每一次鍵盤抬起，都判斷頁面有沒有div，有就洗掉

--->何時出現div：判斷條件：當文本框為空，或臨時數字空，不創建div，如果有div，就洗掉

--->創建div, div加到box, div設定樣式 ; 回圈遍歷創建p，p加入新建的div；加入滑鼠進入和移開的樣式（在回圈里面，用命名函式，減少負荷）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }

    #txt {
      width: 350px;
    }
  </style>
</head>

<body>

  <div id="box">
    <input type="text" id="txt" value="">
    <input type="button" value="https://www.cnblogs.com/jane-panyiyun/p/搜索" id="btn">
  </div>

  <script src="https://www.cnblogs.com/jane-panyiyun/p/common.js"></script>
  <script>


    var keyWords = ["小楊才是最純潔的", "小楊才是最帥的", "小段是最猥瑣的", "小超是最齷齪的", "傳智播客是一個培訓機構", "傳說在傳智有個很帥很純潔的小楊", "蘋果好吃", "蘋果此次召回還是沒有中國"];
    //獲取文本框注冊鍵盤抬起事件
    my$("txt").onkeyup = function () {

      //每一次鍵盤抬起，都判斷頁面有沒有div
      if (my$("dv")) {
        //洗掉一次
        my$("box").removeChild(my$("dv"));
      }

      //輸入的內容，即文本框里面的內容，和keywords去對比
      //獲取文本框輸入的內容
      var text = this.value;
      //臨時陣列--空陣列------->存放對應上的資料
      var tempArr = [];
      //把文本框輸入的內容和陣列中的每個資料對比
      for (var i = 0; i < keyWords.length; i++) {
        //是否是最開始出現的
        if (keyWords[i].indexOf(text) == 0) {
          tempArr.push(keyWords[i]);//追加進tempArr
        }
      }

      //如果文本框為空，且臨時陣列為空，不創建div
      if (this.value.length == 0 || tempArr.length == 0) {
        //如果頁面有div，洗掉div
        if (my$("dv")) {
          my$("box").removeChild(my$("dv"));
        }
        return;
      }

      //創建div 把div加入到名為box的div里面
      var dvObj = document.createElement("div");
      my$("box").appendChild(dvObj);
      dvObj.id = "dv";
      dvObj.style.width = "350px";
      dvObj.style.border = "1px solid pink";
      //回圈遍歷臨時陣列，創建對應的P標簽
      for (var i = 0; i < tempArr.length; i++) {
        var pObj = document.createElement("p");
        //把p加到div里面
        dvObj.appendChild(pObj);
        setInnerText(pObj, tempArr[i]);
        pObj.style.margin = 0;
        pObj.style.padding = 0;
        pObj.style.cursor = "pointer";
        pObj.style.marginTop = "5px";
        pObj.style.marginLeft = "5px";
        //滑鼠進入
        pObj.onmouseover = mouseoverHandle;
        //滑鼠離開
        pObj.onmouseout = mouseoutHandle;
      }

      function mouseoverHandle() {
        this.style.backgroundColor = "yellow";
      }
      function mouseoutHandle() {
        this.style.backgroundColor = "";
      }

    };
  </script>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/164084.html

標籤：JavaScript

上一篇：reselect是怎樣提升react組件渲染性能的？

下一篇：JS---涉及到的common.js