模拟百度搜索

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44317018/article/details/88955409
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- <div id="box">
      <input type="text" id="txt">
    </div>
    <script>
    var keywords=["1111","1122","123123","小明","小白"]

    //当键盘抬起时,触发事件,检索用户在文本框里输入的内容,在文本框的下面的盒子里显示对应的内容
        document.getElementById("txt").function(){
            //====================================================
            //注意:每次抬起键盘时,需要删除下面创建div
            //先判断有没有这个div,如果有就删除,没有就不管了
            if(document.getElementById("dv")){
                document.getElementById("box").removeChild(document.getElementById("dv"))
            }

            //1.添加一个新的数组,用于存储老的数组中符合的数组元素
            var newArr=[];
            //2.获取文本框输入的值
            var text= this.value;
            //3.检索用户输入的内容是不是老的数组中开始
            for(var i=0;i<keywords.length;i++){
                //字符串对象 中如果存在一个 字符串 ,并且这个 字符串 在 字符串对象 的开始位置
                //对象.indexOf("字符串"):判断字符串在对象中的位置 返回索引 
                if(keywords[i].indexOf(text)==0){
                    newArr.push(keywords[i]);//往新数组中追加元素
                }
            }
            console.log(newArr);
            //=============================================================
            //如果新的数组的长度为0,或者文本框没有输入内容,那么我们也不用创div
            if(newArr.length==0 || text.length==0){
                return;
            }
            //4.将新数组中的元素,显示在页面中---再页面中创建元素
            //4.1 在页面中创建div,并设置样式显示
            var dvObj=document.createElement("div");
            document.getElementById("box").appendChild(dvObj);//往页面中追加元素
            dvObj.style.width="300px";
            dvObj.style.height="200px";//============可以不给
            dvObj.style.border="1px solid red";
            dvObj.id="dv";

            for(var j=0;j<newArr.length;j++){
                var pObj=document.createElement("p");//创建p标签
                dvObj.appendChild(pObj);//把p标签追加道div中
                pObj.innerHTML=newArr[j];//设置p标签的文本内容
            }
        }


        var str="你好呀我很好"
        console.log(str.indexOf("呀"));//返回呀对应的索引
    </script> -->


<div id="box">
        <input type="text" id="txt">
      </div>
      <script>
      var keywords=["1111","1122","123123","小明","小白"]
          document.getElementById("txt").function(){
              if(document.getElementById("dv")){
                  document.getElementById("box").removeChild(document.getElementById("dv"))
              }
              var newArr=[];
              var text= this.value;
              for(var i=0;i<keywords.length;i++){
                  if(keywords[i].indexOf(text)==0){
                      newArr.push(keywords[i]);
                  }
              }
              console.log(newArr);
              if(newArr.length==0 || text.length==0){
                  return;
              }
              var dvObj=document.createElement("div");
              document.getElementById("box").appendChild(dvObj);
              dvObj.style.width="300px";
              dvObj.style.height="200px";
              dvObj.style.border="1px solid red";
              dvObj.id="dv";
  
              for(var j=0;j<newArr.length;j++){
                  var pObj=document.createElement("p");
                  dvObj.appendChild(pObj);
                  pObj.innerHTML=newArr[j];
              }
          }
  
  
          var str="你好呀我很好"
          console.log(str.indexOf("呀"));
      </script>
</body>
</html>
展开阅读全文

没有更多推荐了,返回首页