Question

I have a jQuery script which allows me to filter list items as I type into the textbox….however, it only filters the text out side of the the tags…

Could someone please adapt this script so that it filters the values of inputs, specifically buttons?

In the head of my html file:

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

Here is the text box:

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

Here is the list:

<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>

if i typed… John, i would see the button with john John Slater as the value.

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

Here is the external JQuery file:

(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);

Any help would be greatly appreciated.

Thankyou 🙂

Answer 1

You have to tweak the :Contains selector. Something like this:

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;
}

I’ve commented the piece of code for explanations.

You can test it on this fiddle.

---

Note: this is absolutely not optmized and it might not completely work with all types of elements (other than input[button]), but it gives you the idea.