Jquery 通過篩選表實時搜索

Question

我正在嘗試通過帶有過濾器的表格進行實時搜索。 應用過濾器時，我希望僅搜索當前顯示的行。 目前，搜索和過濾器可以自行運行。 我嘗試使用 JQuery 的可見/隱藏選擇器僅遍歷可見行，但這不起作用，因為隱藏的行在進一步搜索時不會變得可見。 我怎樣才能讓他們一起工作？ JSfiddle: https://jsfiddle.net/L09u3z4p/

JS

$(document).ready(function () {

    // Live search function through user input
    $("#search").keyup(function () {
        var value = $(this).val().toLowerCase().trim();

        // Tried searching through visible rows - does not work - ex $("#indexTable tbody tr").not(":hidden").each...
        $("#indexTable tbody tr").each(function (index) {

            var row = $(this);
            var name = row.find('td').eq(0).text().toLowerCase().trim();
            var location = row.find('td').eq(1).text().toLowerCase().trim();

            if (name.indexOf(value) == -1 && location.indexOf(value) == -1) {
                row.hide();
            }
            else {
                row.show();
            }
        });
    });

    // Map regions to cities
    const regions = {
        'central': ['Chicago', 'Madison', 'Dallas'],
        'east': ['New York', 'Boston'],
        'west': ['Seattle', 'Los Angeles'],
    }

    // Table filters through checkboxes
    $("input[type='checkbox']").change(function () {
        var locations = [];
        var hideNoAges = $('#hideAge').is(":checked")

        // Get ids of each region checkbox checked
        $(".location:input[type='checkbox']").each(function () {
            if ($(this).is(":checked")) {
                locations.push($(this).attr('id'));
            }
        })

        // Get list of all cities to be included in filter
        var cities = locations.map(function (i) {
            return regions[i].join();
        }).join().split(",");

        if (cities == "" && !hideNoAges) { // if no filters selected, show all items
            $("#indexTable tbody tr").show();
        } else { // otherwise, hide everything...
            $("#indexTable tbody tr").hide();

            $("#indexTable tbody tr").each(function () {
                var show = false;
                var row = $(this);

                if (hideNoAges) {
                    if (row.find('td').eq(2).text() == "Unknown") {
                        show = false;
                    } else {
                        show = true;
                        if (cities != "") {
                            cities.forEach(function (city) {
                                if (row.find('td').eq(1).text() != city) {
                                    show = false;
                                }
                            });
                        }
                    }
                }

                cities.forEach(function (city) {
                    if (row.find('td').eq(1).text() == city) {
                        show = true;
                        if (hideNoAges && row.find('td').eq(2).text() == "Unknown") {
                            show = false;
                        }
                    }
                })
                if (show) {
                    row.show();
                }
            })
        }
    })
})

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <table id="indexTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Location</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Bob</td>
                <td>Chicago</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Mike</td>
                <td>New York</td>
                <td>Unknown</td>
            </tr>
            <tr>
                <td>Sarah</td>
                <td>Seattle</td>
                <td>30</td>
            </tr>
            <tr>
                <td>Bill</td>
                <td>Los Angeles</td>
                <td>51</td>
            </tr>
            <tr>
                <td>Gary</td>
                <td>Boston</td>
                <td>37</td>
            </tr>
            <tr>
                <td>Melissa</td>
                <td>Madison</td>
                <td>Unknown</td>
            </tr>
            <tr>
                <td>Greg</td>
                <td>Dallas</td>
                <td>61</td>
            </tr>
        </tbody>
    </table>
    <h5>Search</h5>
    <div>
        <label for="search">Search</label>
        <input type="text" id="search">
    </div>
    <h5>Age Filter</h5>
    <label for="hideAge">Hide unknown ages</label>
    <input type="checkbox" id="hideAge">
    <h5>Region Filter</h5>
    <div>
        <label for="east">East</label>
        <input type="checkbox" id="east" class="location">
    </div>
    <div>
        <label for="central">Central</label>
        <input type="checkbox" id="central" class="location">
    </div>
    <div>
        <label for="west">West</label>
        <input type="checkbox" id="west" class="location">
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>

</html>

Answer 1

您可以嘗試為過濾器應用的行添加 class，然后使用 class 選擇器（比如說.filtering ）搜索這些行。 反之亦然，您可以對搜索（可能.searching ）執行相同的操作並對它們應用過濾器。

Jquery 通過篩選表實時搜索

問題描述

1 個解決方案

解決方案1
0 2020-05-17 16:34:07

Jquery 通過篩選表實時搜索

問題描述

1 個解決方案

解決方案1 0 2020-05-17 16:34:07

解決方案1
0 2020-05-17 16:34:07