对 html 表的列启用部分匹配搜索

Question

我在屏幕上填充了一个 html 表格。我编写了一段工作代码来使用列上的逗号分隔字符串过滤表。对于 例如 - 列名 = ID， 我给出的示例过滤器字符串 = 1,2,3,4,6,8,9,90。所以它只显示具有这些 ID 的行。我的JS代码如下-

$(function () {

    $("#filter").click(function () {
        try {
            ids = $("#inputFilter").val();
            if (ids != "") {
                idsArray = ids.split(",");
                $("#my-table tr:gt(0)").hide();
                $.each(idsArray, function (i, v) {
                    $("#my-table tr[data-id=" + v + "]").show();
                })
            } else {
                $("#my-table tr").show();
            }
        }
        catch (error) {
            try {
                $body.removeClass("loading");
            }
            catch (error) {
            }
            alert(error);
        }
    });
});

现在我想启用对 ID 的部分搜索，这意味着，例如，当我输入 23、45、78、4324、5436、321321 时，表也应该开始过滤部分匹配项。如何实现？

Answer 1

首先，您需要删除多余的空格，然后 split(",") 和 JQuery 选择器 [attribute*=”value”] 就像 $("#my-table tr[data-id*='" + v + "']") 女巫选择具有 data-id' 值的所有行具有任何搜索输入 ID，试试这个例子：

$(function () {

    $("#filter").click(function () {
        try {
            ids = $("#inputFilter").val();
            if (ids != "") {
                idsArray = ids.replace(/[\n\r\t]/g,"").replace(/\s+/g,"").split(",");
                $("#my-table tr:gt(0)").hide();

            $.each(idsArray, function (i, v) {
             $("#my-table tr[data-id*='" + v + "']").show();
                })
            } else {
                $("#my-table tr").show();
            }
        }
        catch (error) {
            try {
                $body.removeClass("loading");
            }
            catch (error) {
            }
            alert(error);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id='inputFilter'>
<button id='filter'>filter</button>

<table id='my-table'>
<tr><th>ID</th><th>Name</th></tr>
<tr data-id="1"><td>1</td><td>Tom 1</td></tr>
<tr data-id="2"><td>2</td><td>John 1</td></tr>
<tr data-id="3"><td>3</td><td>Van 1</td></tr>
<tr data-id="10"><td>10</td><td>Tom 10</td></tr>
<tr data-id="20"><td>20</td><td>John 20</td></tr>
<tr data-id="30"><td>30</td><td>Van 30</td></tr>
<tr data-id="101"><td>101</td><td>Tom 101</td></tr>
<tr data-id="202"><td>202</td><td>John 202</td></tr>
<tr data-id="303"><td>303</td><td>Van 303</td></tr>
</table>

Answer 2

您可以使用.filter(fn)

$(function () {
    $("#filter").click(function () {
        try {
            ids = $("#inputFilter").val();
            if (ids != "") {
                idsArray = ids.split(",");
                $("#my-table tr:gt(0)").hide();
                $.each(idsArray, function (i, v) {
                    $("#my-table tr").filter(function(){
                        //do your filtering, this is an example
                        //and use contains
                        return this.dataset.id.contains(v);
                    }).show();
                })
            } else {
                $("#my-table tr").show();
            }
        }
        catch (error) {
            try {
                $body.removeClass("loading");
            }
            catch (error) {
            }
            alert(error);
        }
    });
});

你也可以使用css选择器[attribute~="value"]

$("#my-table tr[data-id~=" + v + "]").show();