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

待我称王封你为后i 2023-06-07 08:12 8阅读 0赞

![在这里插入图片描述][70]

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>

![在这里插入图片描述][20191012160724726.gif]

关于JavaScript Array filter() 方法：  
https://www.runoob.com/jsref/jsref-filter.html

[70]: /images/20230601/de04ff69812f4c2c8d384d7a5eef6fbe.png
[20191012160724726.gif]: /images/20230601/2cdda84762a24c8cbd84bb12f552ac71.png