Question

我发现了Nachito的一个jsfiddle几乎可以做我想要的。唯一的区别是我需要用表而不是列表来做这件事。

这是Nachito的http://jsfiddle.net/nachito/QhL2M/24/

<form class="filterform" action="#">
  <input class="filterInput" type="text">
</form>

<ul id="list">
    <li>Australia</li>
    <li>hello hi bye goodbye</li>
    <li>hello|hi|bye|goodbye</li>
    <li>Belgium</li>
    <li>Brazil</li>
    <li>Canada Denmark hello</li>
    <li>Denmark</li>
</ul>


(function($) {

$('.filterInput').keyup(function() {
    var inputValue = $(this).val();
    if (inputValue.length > 2) {
        var inputWords = inputValue.toLowerCase().split(/[\s,]+/);
        var $matches = $('#list li').filter(function() {
            for (i in inputWords) {
                if ($.trim(inputWords[i]) == "") {
                    continue;
                }
                var r = new RegExp('\\b(' + inputWords[i] + ')(s|es|\'s)?\\b', 'i');
                if (r.test($(this).text())) {
                    return true;
                }
            }
            return false;
        });

        if ($matches.length) {
            $matches.slideDown(400);
            $('#list li').not($matches).slideUp();
        } else {
            $('#list li').slideDown();
        }
    } else {
        $('#list li').slideDown();
    }
    return false;
})

}(jQuery));

这是我的前叉http://jsfiddle.net/sptrsn/d6anawnn/5/

<form class="filterform" action="#">
    <input class="filterInput" type="text">
</form>

<table id="list">
    <tr><td>Australia</td></tr>
    <tr><td>hello hi bye goodbye</td></tr>
    <tr><td>hello|hi|bye|goodbye</td></tr>
    <tr><td>Belgium</td></tr>
    <tr><td>Brazil</td></tr>
    <tr><td>Canada Denmark hello</td></tr>
    <tr><td>Denmark</td></tr>
</table>

(function($) {

$('.filterInput').keyup(function() {
    var inputValue = $(this).val();
    if (inputValue.length > 2) {
        var inputWords = inputValue.toLowerCase().split(/[\s,]+/);
        var $matches = $('table tr td').filter(function() {
            for (i in inputWords) {
                if ($.trim(inputWords[i]) == "") {
                    continue;
                }
                var r = new RegExp('\\b(' + inputWords[i] + ')(s|es|\'s)?\\b', 'i');
                if (r.test($(this).text())) {
                    return true;
                }
            }
            return false;
        });

        if ($matches.length) {
            $matches.slideDown(400);
            $('table tr').not($matches).slideUp();
        } else {
            $('table tr').slideDown();
        }
    } else {
        $('table tr').slideDown();
    }
    return false;
})

}(jQuery));

我将html更改为一个带有一个td元素的简单表。在js中，我将三个jQuery选择器更改为＆＃39; tr td＆＃39;而不是＆＃39; li＆＃39;

此时，它只是隐藏所有数据。

重点...我想要一个简单的过滤功能，它将根据包含的标签对行列表进行子集化。一旦我使这个基本函数工作，我将需要一些额外的td元素，因此希望在表中执行此操作。

Answer 1

 if ($matches.length) {
                $matches.slideDown(400);
                $('#list tr').children().not($matches).slideUp();
            } else {
                $('#list tr').children().slideDown();
            }
        } else {
            $('#list tr').slideDown();
        }
        return false;
    })

更新了小提琴：http://jsfiddle.net/d6anawnn/6/

Answer 2

亲爱的你最好使用http://www.datatables.net/一个带有大量选项的jquery插件，它将节省时间和精力

Jquery过滤表

2 个答案: