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

最新推荐文章于 2025-06-20 09:25:12 发布

zuo_zuo_blog

最新推荐文章于 2025-06-20 09:25:12 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：ＪａｖａＳｃｒｉｐｔ

本文链接：https://blog.youkuaiyun.com/zuo_zuo_blog/article/details/89279500

ＪａｖａＳｃｒｉｐｔ专栏收录该内容

105 篇文章

订阅专栏

本文介绍了一种通过输入事件模拟服务器获取内容并创建列表的方法，详细解释了如何使用JavaScript处理用户输入，过滤并显示匹配项。代码示例展示了如何在用户输入时实时更新列表，包括删除旧列表和处理空输入的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>