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="搜索" id="btn">
  </div>

  <script src="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>

 

posted @ 2019-12-11 12:41  jane_panyiyun  阅读(492)  评论(0)  编辑  收藏  举报