Question

我有一个复选框中的项目列表，我想在用户在文本框中键入时过滤这些项目，只显示匹配的项目。我试图修改现有的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));
                    }
                });
            });
        });
    });
});

Answer 1

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

$("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();
    });
});

演示：http://jsfiddle.net/x01fxx1y/

Answer 2

这应该有效：

$("document").ready(function () {
   $("#searchText").on("keyup", function (e) {
      var input  = $(this).val();
      $("#ulVal input[type=checkbox]").each(function (index, element) {
         var regex = new RegExp($.trim(input), "gi");
         if($(element).val().match(regex) !== null) {
            $(element).parent().show();
         } else {
            $(element).parent().hide();
         }
      });
   });
});

我还创建了一个jsFiddle： http://jsfiddle.net/e6jycmx6/

Answer 3

尝试更简单的方法：

$("document").ready(function () {
    $("#searchText").on("keyup", function (input) {
        $("#ulVal 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();
            }

        });
    });
});

jquery - 在文本框keyup上的<ul>中筛选复选框</ul>

3 个答案:

演示：http://jsfiddle.net/x01fxx1y/