用 js 实现简单的词条匹配显示在输入框下效果_js怎么实现昵称在输入内容的下方-CSDN博客

本文链接：https://blog.csdn.net/qq_36647038/article/details/82084848

用 js 实现简单的词条匹配显示在输入框下效果

必要的解释都在代码的注释中，用以伙伴们参考的时候容易理解。

<body>
  <div id="box">
    <input type="text" name="" id="txt">
    <input type="button" name="" id="" value="搜索">
  </div>
</body>

<script>
   var keyWords = ["今天天气不错", "今天下雨了", "台风好大", "魔都","今天是个好日子"];

    document.getElementById("txt").onkeyup = function () {
    // 每一次键盘抬起的时候都要判断一下有没有dv
    if (document.getElementById("dv")) {
     document.getElementById("box").removeChild(document.getElementById("dv"));
    }
    //  用来存储匹配到的热词。
    var tempArr = [];
    // 文本框中得到的文字，即value
    var txt = this.value;
    for (var i = 0; i < keyWords.length; i++) {
      //数组的每一项都要和输入的作比对
      if (keyWords[i].indexOf(txt) == 0) {
        tempArr.push(keyWords[i]);
      }
    }
    //   输入框没有字和临时数组的长度为0的话就移除dv
    if (this.value.length == 0 || tempArr.length == 0) {
      if (document.getElementById("dv")) {
        document.getElementById("box").removeChild(document.getElementById("dv"));
      }
      return;
    }
    // 创建一个热词出现的div，添加到box中，设置对应样式。
    var dvObj = document.createElement("div");
    my$("box").appendChild(dvObj);
    dvObj.id = "dv";
    dvObj.style.width = "200px";
    dvObj.style.border = "1px solid #999";
    // 每一条出现的热词放入P中
    for (var j = 0; j < tempArr.length; j++) {
      var pObj = document.createElement("p");
      dvObj.appendChild(pObj);
      pObj.innerText=tempArr[i];
      pObj.style.margin = "0";
      pObj.style.padding = "0";
      pObj.style.marginTop = "5px";


      pObj.onmouseover=function(){
          this.style.backgroundColor="lightgrey";
        };
      pObj.onmouseout=function(){
          this.style.backgroundColor="";
        };
    }

  };
</script>

本小效果的实现主要用到了以下的知识点：

onkeyup事件，即键盘抬起的事件。
keyWords[i].indexOf(text)==0 用到了数组中的查找方法（arr.indexOf(elemnte) 查找元素第一次出现在数组中的位置，从0开始的，没有的话返回值是-1）
tempArr.push(keyWords[i])用到了数组中栈方法（arr.push(element) 把元素插入到数组的最后面）
document.getElementById("box").removeChild(document.getElementById("dv")) 用到了移除子节点的知识点（父元素.removeChild(要移除的子元素)）
var dvObj = document.createElement("div");用到了创建元素的方法（document.createElement( “要创建的元素”)），注意引号呦~
my$("box").appendChild(dvObj);用到了添加子元素的方法（父元素.appendChild(要添加的元素j)）

最后附上图