【JS原生】按条件筛选数组内容，兼容IE

最新推荐文章于 2021-07-10 18:24:54 发布

freedom_文

最新推荐文章于 2021-07-10 18:24:54 发布

阅读量562

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/freedomVenly/article/details/102537519

版权

javascript 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

在这里插入图片描述

CV用


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{width: 800px;border: 1px solid #0a8ed3;padding: 20px;}
        label{display: inline-block;width: 20%;}
    </style>
</head>
<body>

<div id="d1">

    <div><input type="text" id="search"></div>  <br>

    <div id="d3"></div>
</div>

<script>
    var jsonS=[
        {"name":"a12","id":1}, {"name":"b23","id":1}, {"name":"c34","id":1},
        {"name":"d12","id":1}, {"name":"e23","id":1}, {"name":"f34","id":1},
        {"name":"g456","id":1}, {"name":"y789","id":1}, {"name":"0974","id":1},
        {"name":"y789","id":1}, {"name":"u666","id":1}, {"name":"i888","id":1},
        {"name":"p777","id":1}, {"name":"8890","id":1}
    ];

    function setData(json) {
        var ins="";

        for(var i=0;i<json.length;i++){
            ins+="<label><input type=\"checkbox\" id='"+json[i].id+"'> "+json[i].name +"</label>";
        }
        d3.innerHTML=ins;
    }

    setData(jsonS);

    document.getElementById("search").onkeyup=function(){

        var val=this.value;

        var current=jsonS.filter(function (item) {return item.name.indexOf(val) != -1});    //ES5语法
        // var current=jsonS.filter(item => item.name.indexOf(this.value) != -1);       //ES6语法

        setData(current);

    }


</script>
</body>
</html>

在这里插入图片描述