为复选框列表 - 动态响应列表创建一个过滤器搜索框

create a filter searchbox to a checkbox list- dynamic response listing

本文关键字：列表 一个 搜索 过滤器 复选框 动态 响应 创建      更新时间：2023-09-26

>我需要做一个带有复选框的项目列表的表单，供用户勾选并选择他们的选项。因为列表有数百个项目，所以为了使搜索工作变得容易，我想如果我可以让搜索框像过滤器一样。当用户输入内容时，它将过滤列表以匹配输入的文本。例如，当用户输入"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>

输入文本字段将是搜索过滤器。如果有人能提供建议，请不胜感激。提前谢谢你！

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

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

解释：

keyup调用文本框的事件。

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

相关文章：