javascript - 使用 jQuery 过滤 html 字段

Question

我已阅读有关过滤表插件的信息。我正在寻找的就像这个弹出窗口。

_{（来源：staticflickr.com）}

当用户开始在搜索框中输入内容时，相关的频道/类别（在上一个下拉框中选择）应该被过滤掉。在过滤过程进行时，还应该发生一些动画加载动作。

我正在寻找 jQuery 插件，这将使我的过滤器工作更容易实现。

Answer 1

我认为有一个插件是模棱两可的。只需执行以下操作：

function filter($rows, category, search) {
     $rows.each(function() {
          if (category == ($("td:eq(2)", this).text() || category == "all") &&  (search. === "" || $("td:eq(1)", this).text().indexOf(search) !== -1) {
               $(":checkbox", this).removeAttr("disabled");
               $(this).show();
          }
          else
               $(this).hide(function(){
                   $(":checkbox", this).attr("disabled", "disabled");
               });
     });
}


$("select.category").change(function() {
     filter ($(this).closest("form").find("tr"), $(this).val(), $(this).closest("form").find("input.search").val());
});

$("input.search").keyUp(function() {
     filter ($(this).closest("form").find("tr"), $(this).closest("form").find("select.catagory").val(), $(this).val()); 
});

您可能需要进行一些调整才能使其与 html 的确切格式一起使用。

更新使其成为插件

$.fn.filter_table = function(options) {
    options = $.extend(options, {
         show: $.noop(), //Callback when a row get shown
         hide: $.noop(), // Callback when a row gets hidden
         entries: "table tr", // Selector of items to filter.
         map: {} //Required parameter
        //TODO Add default ajustment parameters here to remove ambiguity and assumptions.      
    });

    return this.each(function() {
        var form = this;

        function each(callback) {
            for (var selector in options.map) {
                 var check = options.map[selector];
                 $(selector, form).each(function(){
                     callback.call(this, check);
                 });  
            }
        }

        function show(row) {
            if (!$(row).is(":visible")) {
               options.show.apply(row);
               $(row).show();
            }
        }

        function hide(row) {
            if ($(row).is(":visible"))
               $(row).hide(options.hide);
        }

        function run_filter() {
            $(options.entries, form).each(function() {
               var row = this, matched = true;

               each(function(check) {
                   matched &= check.call(this, row);
               });

               matched ? show(this) : hide(this);
            })
        }

        //Bind event handlers:

        each(function() {
           $(this).bind($(this).is(":text") ? "keyup" : "change", run_filter);
        });

    });
};

您可以按如下方式使用此插件：

$("form").filter_table({
    map: {
       //These callback define if a row was matched:
       "select.category": function(row) {
            //this refers to the field, row refers to the row being checked.
            return $(this).val() == "all" || $(this).val() == $("td:eq(2)", row).text();
        },
        "input.search": function(row) {
            return $(this).val() == "" || $(this).val() == $("td:eq(1)", row).text();
        }
    },

    entries: "tr:has(:checkbox)", //Filter all rows that contain a checkbox.

    show: function() {
        $(":checkbox", this).removeAttr("disabled");
    },

    hide: function() {
        $(":checkbox", this).attr("disabled", "disabled");
    }
});

好的，一旦调试完毕，它应该可以工作。我没有测试过。我认为这部分取决于你。

Answer 2

你可以使用这个tablesorterfilter插件来实现你所需要的

工作小提琴

也请看看http://datatables.net/

Answer 3

如果您的 HTML 如下所示：

<form id="filterForm">
    <input type="text" id="filterBox">
    <input type="submit" value="Filter">
</form>

<div id="checkboxContainer">
    <label><input type="checkbox" id="checkbox123"> Checkbox 123</label>
</div>

你可以做类似...

//Set variables so we only have to find each element once
var filterForm = $('#filterForm');
var filterBox = $('#filterBox');
var checkboxContainer = $('#checkboxContainer');

//Override the form submission
filterForm.submit(function() {

    //Filter by what the label contains
    checkboxContainer.find('label').each(function() {

        //If the value of filterBox is NOT in the label
        if ($(this).indexOf(filterBox.val()) == -1) {

            //Hide the label (and the checkbox since it's inside the label)
            $(this).hide();

        } else {

            //Show it in case it was hidden before
            $(this).show();

        }
    });

    //Prevent the form from submitting
    return false;
});

Answer 4

那里有很多选择。这是一个很好的起点：http ://www.wokay.com/technology/32-useful-jquery-filter-and-sort-data-plugins-62033.html

像这样的过滤并不复杂。可能值得查看一些接近您想要的插件的来源，然后尝试编写自己的插件。如果你自己做，你会学到更多！