Extending jquery Attribute selectors

Question

Hello,

i have an inline popup that shows a list of checkboxes and associated labels each in seperate span element. i want to add a text box where user can type to filter the values (user names) in the popup. i have following code

$("#toEmpFilter").live("change", function () {

            var FilterVal = $(this).val();
            $("input.boxes").not("[title*=" + FilterVal + "]").each(function () {
                $(this).parent("span.clscheck").hide();
            });
          $("input.boxes[title*=" + FilterVal + "]").each(function () {
                $(this).parent("span.clscheck").show();
            });

        });   

label values are copied in title field like . this code works fine. the only problem with it is title*=FilterVal makes a case Sensitive comparison while i need case insensitive comparison. i have done some time on google but can only find extending :extend like keywords as opposed to *= or $= operators regards

Answer 1

Use

var FilterVal = $(this).val().toLowerCase()

then FilterVal will alway be lower case.

Assuming that title* is always lowercase as well.

Answer 2

You can pass a function to .not() and normalize the case on both ends.

var FilterVal = $(this).val().toLowerCase(); // change to lower case

$("input.boxes").not(function() {
          // change title to lower case and compare
      return this.title.toLowerCase().indexOf( FilterVal ) > -1;
}).each(function () {
    $(this).parent("span.clscheck").hide();
});

---

EDIT: Didn't notice that you weren't doing an exact comparison. Fixed to replicate the attribute contains comparison.

And you could shorten your code like this:

   $("#toEmpFilter").live("change", function () {
        var FilterVal = $(this).val().toLowerCase();

        $("input.boxes").each(function () {
            $(this).parent("span.clscheck")
                   .toggle( this.title.toLowerCase().indexOf( FilterVal ) > -1 );
        });
    });

This way you're only selecting the elements once.