没有后台API接口前端页面实现搜索框模糊查询

2022-09-04 18:07:02
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="search" placeholder="西游记人物模糊查询" id="search">
<ul>

</ul>
<script>
    //模拟的json数据
    var arr=[
        {"id":1,"name":"猪八戒"},
        {"id":2,"name":"天蓬元帅"},
        {"id":3,"name":"沙和尚"},
        {"id":4,"name":"唐僧"},
        {"id":5,"name":"白骨精"},
        {"id":6,"name":"齐天大圣"},
         {"id":7,"name":"如来"},
         {"id":8,"name":"牛魔王"},
         {"id":9,"name":"红孩儿"},
         {"id":10,"name":"龙王"},
         {"id":11,"name":"女儿国王"},
         {"id":12,"name":"唐三藏"},
        {"id":13,"name":"孙猴子"},
        {"id":14,"name":"孙悟空"}
       ];

    //======================第一种方案   使用includes（）
    // document.getElementById("search").oninput=function () {
    //     if (this.value==""){    //判断内容为空的时候退出函数 ----->不判断当内容为空自动加载了数组全部内容
    //         return
    //     }
    //     document.querySelector("ul").innerHTML="";   //将上一次查询的结果清空
    //     for(var i=0;i<arr.length;i++){
    //         if(arr[i].name.includes(this.value)){   //查询数组中每一项数据
    //            var oLi=document.createElement("li");    //创建元素并赋值
    //            oLi.innerHTML=arr[i].name;
    //             document.querySelector("ul").append(oLi); //追加元素
    //         }
    //     }
    // };
    //  ================第二种方案   使用正则的方式
    document.getElementById("search").oninput=function () {
            if (this.value==""){    //判断内容为空的时候退出函数 ----->不判断当内容为空自动加载了数组全部内容
                return
            }
        document.querySelector("ul").innerHTML="";   //将上一次查询的结果清空
        var reg=new RegExp(this.value);   //   等同于   / this.value/
        for (var j=0;j<arr.length;j++){
            if(arr[j].name.match(reg)){   //查询数组中每一项数据
                    var oLi=document.createElement("li");    //创建元素并赋值
                    oLi.innerHTML=arr[j].name;
                    document.querySelector("ul").append(oLi); //追加元素
            }
        }
    }




</script>

</body>
</html>
码农公寓

相关文章
