jQuery-在文本框键盘上过滤<ul>中的复选框

debugcn 发表于 Dev

ra_ie_darkness

我在复选框中有一个项目列表，我想在用户在文本框中输入内容时过滤这些项目，仅显示匹配的项目。我试图修改现有的jquery函数以使用复选框，但是当我在文本框中输入一些文本时没有任何反应。我如何使它工作？

<form id="form1" runat="server">
    <div id="someDiv">
        <input type="text" id="searchText" />
        <ul style="list-style-type:none" id="ulVal">
            <li><input type="checkbox" value="Berry" />Berry</li>
            <li><input type="checkbox" value="Apple" />Apple</li>
            <li><input type="checkbox" value="Black" />Black</li>
            <li><input type="checkbox" value="Red" />Red</li>
            <li><input type="checkbox" value="Box" />Box</li>
            <li><input type="checkbox" value="Container" />Container</li>
        </ul>
        <input type="button" id="testButton" value="meHere" />
    </div>
</form>

$("document").ready(function () {
    $("#searchText").on("keyup", function () {
        $("#ulVal").each(function () {
            var options = [];
            $("#ulVal").find("checkbox").each(function () {
                options.push({ value: $(this).val(), text: $(this).text() });
            });
            $("#ulVal").data("checkbox", options);
            $("searchText").bind("change keyup", function () {
                var options = $("#ul").empty().data("checkbox");
                var search = $.trim($("checkbox").val());
                var regex = new RegExp(search, "gi");
                $.each(options, function (i) {
                    var option = options[i];
                    if (option.text.match(regex) !== null) {
                        $("#ulVal").append($('<option>').text(option.text).val(option.value));
                    }
                });
            });
        });
    });
});

dfsq

这是您的代码的修改和简化版本，似乎可以满足您的要求：

$("document").ready(function () {

    var $ulVal = $("#ulVal"),
        $li = $ulVal.children(),
        $checks = $ulVal.find(':checkbox');

    $("#searchText").on("keyup", function () {

        var regex = new RegExp(this.value, "gi");

        $li.hide();
        $checks.filter(function() {
            return regex.test(this.value);
        }).parent().show();
    });
});