Question

我需要做一个带有长项目列表的表单，其中包含用于勾选和选择其选项的复选框。因为列表有数百个项目，所以为了使搜索工作变得简单，我想如果我可以让搜索框像过滤器一样。当用户输入内容时，它将过滤列表以匹配输入的文本。例如，当用户输入“A”时，只有带有“A”的项目才会显示在列表中。用户将重复搜索项目并勾选他们想要的项目的复选框。然后当搜索框为空时，应显示完整列表。最后，用户点击提交，所有选中的项目都应该发布到下一页。（我希望我的解释清楚明白。）认为js“onchange”功能可以解决问题，但由于我对js的了解有限，我不知道如何。

例如我的代码：

<form name="submit" action="envelope.php" method="POST">
                <table width="100%" cellspacing="0" cellpadding="3">
                    <tr>
                        <td></td>
                        <td colspan="2"></td>
                        <td><input type="text" name="search" onchange="filter()"/></td>
                    </tr>
                    <?php
                    $i=0;
                    $str = "SELECT * FROM item ";
                    $query = mysql_query($str) or die(mysql_error());
                    while($row = mysql_fetch_array($query))
                    { 
                        $i++; ?>
                        <tr>
                            <td style="border-bottom: 1px #cccccc solid" width="10">&nbsp;&nbsp;<?php echo $i ?>.</td>
                            <td style="border-bottom: 1px #cccccc solid"><input type="checkbox" name="itm[]" value="<?php echo $row['ID'] ?>"/></td>
                            <td style="border-bottom: 1px #cccccc solid"><?php echo $row['ID'] ?></td>
                            <td style="border-bottom: 1px #cccccc solid"><?php echo $row['name'] ?></td>
                        </tr>
                        <?php
                    } ?>
                </table>
            </div>
            <br/>
            <input type="submit" name="submit" value="submit"/>
        </form>

输入文本字段将是搜索过滤器。感谢有人可以提供建议。提前谢谢！

Answer 1

$("document").ready(function () {
    $("[name=search]").on("keyup", function (input) {
        $("input[type=checkbox]").each(function (checkbox) {
        var regex = new RegExp($.trim($(input).val()), "gi");
        if($(checkbox).html().match(regex) !== null) {
            $(checkbox).hide();
        }
        else {
            $(checkbox).show();
        }
        });
    });
});

<强>解释

keyup事件的文本框被调用。

在keyup上，如果文本框的文本与搜索字符串匹配，则会显示，否则会隐藏。

Answer 2

使用datatable.it提供文本框来过滤它应用于所有列的表中的数据访问以下链接 datatables

创建一个过滤器搜索框到checkboxlist-动态响应列表

2 个答案: