Js模拟百度搜索，模拟服务器获取内容

1通过输入事件模拟服务器获取内容创建列表
2.判断字符串以某个字符串开头通过给定字符串的索引值=0

var str="abcdefg";
    //判断str是否以a开头（给定字符窜他的索引值为0）
    var num=str.indexOf("a");
    alert(num);  //0

在这里插入图片描述
3.3个bug解决

  //问题1每次创建ul之前删除旧的
     // var aaa=box.getElementsByTagName("ul")[0];
       if(box.children[2]){
           box.removeChild(box.children[2]);
       }
       //问题2如果内容为空不执行切断函数
       //如果老鼠组中没有找到切断函数
       if(this.value.length==0||newArr.length===0){
           return;
       }

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        .box{
            width:500px;
            margin: 200px auto;
        }
        ul{
            width:392px;
            padding: 5px;
            list-style: none;
            border:1px solid red;
        }
        li:hover{
            background-color: red;
        }
        input{
            width:400px;
        }
        button{
            width:70px;
        }
    </style>
</head>
<body>
<div class="box">
    <input type="text">
    <button>搜索</button>
    <!--<ul>
        <li>aa</li>
        <li>bb</li>
        <li>cc</li>
    </ul>-->
</div>
<script>
    //输入内容输入事件键盘弹起，模拟服务器获取内容创建列表
    var arr=["a","ab","abc","abcd","aaa","aaaa"];
    var box=document.getElementsByTagName("div")[0];
    var ipt=box.children[0];
  /* var ipt=document.getElementsByTagName("input")[0];*/
   ipt.function () {
       //创建一个字符串，里面加了li和对应的内容
       var newArr=[];
       for(var i=0;i<arr.length;i++){
           var val=this.value;
           if(arr[i].indexOf(val)===0){
               newArr.push("<li>"+arr[i]+"</li>");
           }
       }
       var str=newArr.join("");
       //问题1每次创建ul之前删除旧的
     // var aaa=box.getElementsByTagName("ul")[0];
       if(box.children[2]){
           box.removeChild(box.children[2]);
       }
       //问题2如果内容为空不执行切断函数
       //如果老鼠组中没有找到切断函数
       if(this.value.length==0||newArr.length===0){
           return;
       }
       var ul=document.createElement("ul");
       ul.innerHTML=str;
       box.appendChild(ul);
   }
</script>
</body>
</html>

Js模拟百度搜索，模拟服务器获取内容

猜你喜欢