jQuery 按值、名称或 ID 过滤输入？值优选

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 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上测试它。

---

注意：这绝对不是优化的，它可能无法完全适用于所有类型的元素（除了 input[button]），但它给了你想法。