搜索自动提示案例

喵_美

于 2019-05-24 17:17:08 发布

阅读量230

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/qq_34708564/article/details/90519995

版权

案例专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box {
      width: 450px;
      margin: 200px auto;
    }
    #txt {
      width: 350px;
    }
    #pop {
      width: 350px;
      border: 1px solid red;
    }
    #pop ul {
      margin: 10px;
      padding: 0px;
      width: 200px;
      list-style-type: none;
    }
    #pop ul li {
    }
  </style>
</head>
<body>
<div id="box">
  <input type="text" id="txt" value="">
  <input type="button" value="搜索" id="btn">
</div>
<script>
  //设置内容的兼容函数
  function setInnerText(element, text) {
    if (typeof element.textContent == "undefined") {
      element.innerText = text;
    } else {
      element.textContent = text;
    }
  }
  var keyWords = ["你好", "你好美", "你最帅", "你好笨", "谁最帅"];//该数据一般从后台获取
  var txt = document.getElementById("txt");
  var box = document.getElementById("box");
  txt.onkeyup = function () {
    //每一次的键盘抬起都判断页面中有没有这个div，若有就删除
    if(document.getElementById("dv")){
      box.removeChild(document.getElementById("dv"));
    }
    //获取文本框输入的内容
    var text = this.value;
    //临时数组--空数组------->存放对应上的数据
    var tempArr = [];
    //把文本框输入的内容和数组中的每个数据对比
    for (var i = 0; i < keyWords.length; i++) {
      //是否是最开始出现的
      if (keyWords[i].indexOf(text) == 0) {
        tempArr.push(keyWords[i]);
      }
    }
    //如果文本框是空的,临时数组是空的,不用创建div
    if (this.value.length == 0 || tempArr.length == 0) {
      //如果页面中有这个div,删除这个div
      if (document.getElementById("dv")) {
        box.removeChild(document.getElementById("dv"));
      }
      return;
    }
    //创建div,把div加入id为box的div中
    var dvObj = document.createElement("div");
    box.appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "350px";
    dvObj.style.border = "1px solid green";
    //循环遍历临时数组,创建对应的p标签
    for (var i = 0; i < tempArr.length; i++) {
      var pObj = document.createElement("p");
      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 = function () {
        this.style.backgroundColor = "yellow";
      };
      //鼠标离开
      pObj.onmouseout = function () {
        this.style.backgroundColor = "";
      };
    }
  };
</script>
</body>
</html>

喵_美

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
搜索自动提示案例

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; ...
复制链接

扫一扫

专栏目录