如何在jquery中使用过滤器函数来过滤div中的一组数据?

时间:2018-06-13 06:26:18

标签: javascript jquery html css bootstrap-4

我有卡片,里面是数据库中的数据。这些卡片包含在名为搜索的div中。我尝试使用其中的数据过滤卡片并输出具有用于过滤的相同数据的卡片。例如,每张卡都有不同的名称,我希望卡具有相同的地址,我希望按按键显示这些卡。这是我目前的代码

<script>
    $(document).ready(function(){
        $("#myInput").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#search card").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>

<div id = "search">


        <?php foreach($query as $row):  ?>

            <div class="card-deck" >
                 <div class="col-xs-6 col-sm-6 col-lg-4">
                    <div class="card"><center>
                        <a href="testingsite.dev/tenant/<?php echo $row->userID; ?>" class="btn btn-default"><img src = "https://admin.orangesuites.ph/static/uploads/<?php echo $row->profile_pic; ?>" width="209" height="180" ></a>
                            <div class="card-body">
                                <h3 class="card-title"><?php echo $row->firstName . ' ' . $row->lastName; ?></h3>
                                <p class="card-text">Room Number: <?php echo $row->bldg_num . '-' . $row->room_num; ?><br>
                                    Price: <?php echo $row->price; ?><br>
                                    Move In Date: <?php
                                    $move_in = new DateTime($row->move_in_date);
                                    echo $move_in->format('F j, Y');
                                    ?><br>
                                     Move Out Date: <?php
                                    $move_out = new DateTime($row->move_out_date);
                                    echo $move_out->format('F j, Y');
                                    ?><br>
                                    Pending Amount: <?php echo $pending_total[$row->merge_id]; ?><br>
                                    Contact Number: <?php echo $row->phone; ?><br><br><br>
                                </p>
                            </div>
                            <div class="card-footer">

                             </div>
                        </center></div>
                </div>
            </div>
        <?php endforeach; ?>

</div>

0 个答案:

没有答案