Question

我有一个jQuery脚本，它允许我在文本框中输入时过滤列表项....但是，它只过滤标签外面的文本......

是否有人可以调整此脚本以便过滤输入值，特别是按钮？

在我的html文件的头部：

<script type="text/javascript" src="js/jquery.liveFilter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
   $(ul#filter_me').liveFilter('slide');
});
</script>

这是文本框：

<input type="text" class="filter" name="liveFilter" />

以下是清单：

<ul id="filter_me">
<li><input type="button" value="John Slater" /></li>
<li><input type="button" value="Matt Bold" /></li>
<li><input type="button" value="Bob Cool" /></li>
</ul>

如果我输入... John，我会看到约翰John Slater的按钮作为值。

<input type="button" value="John Slater" />

这是外部JQuery文件：

(function (a) {
    a.fn.liveFilter = function (d) {
        var c = a(this);
        var g;
        if (a(this).is("ul")) {
            g = "li"
        } else {
            if (a(this).is("ol")) {
                g = "li"
            } else {
                if (a(this).is("table")) {
                    g = "tbody tr"
                }
            }
        }
        var e;
        var b;
        var f;
        a("input.filter").keyup(function () {
            f = a(this).val();
            e = a(c).find(g + ':not(:Contains("' + f + '"))');
            b = a(c).find(g + ':Contains("' + f + '")');
            if (d == "basic") {
                e.hide();
                b.show()
            } else {
                if (d == "slide") {
                    e.slideUp(500);
                    b.slideDown(500)
                } else {
                    if (d == "fade") {
                        e.fadeOut(400);
                        b.fadeIn(400)
                    }
                }
            }
        });
        jQuery.expr[":"].Contains = function (j, k, h) {
            return jQuery(j).text().toLowerCase().indexOf(h[3].toLowerCase()) >= 0
        }
    }
})(jQuery);

非常感谢任何帮助。

谢谢你：）

Answer 1

您必须调整:Contains选择器。像这样：

jQuery.expr[":"].Contains = function (j, k, h) {

    // get children that have a "value" attribute
    // (added sort-of handling for <select> elements)
    var m = jQuery(j).children('[value], select > option[value]');

    return m.length

        // children were found, base the check on the value
        ? m.filter(function() {
                return this.value &&
                       this.value.toLowerCase().indexOf(h[3].toLowerCase()) >= 0;
            }).length > 0

        // otherwise, base on the "innerText"
        : jQuery(j).text().toLowerCase().indexOf(h[3].toLowerCase()) >= 0;
}

我已经对这段代码进行了评论以供解释。

您可以在此fiddle上进行测试。

注意：这绝对不是优化的，它可能无法完全适用于所有类型的元素（输入[按钮]除外），但它可以提供您的想法。

jQuery按值，名称或ID过滤输入？价值最好

1 个答案: