Extending jQuery attribute selectors

I have an inline popup that shows a list of checkboxes and associated labels each in separate 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 <input type="text" title="john woo"/>. 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 research but can only find extending :extend like keywords as opposed to *开发者_开发技巧= or $= operators.

---

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.

---

Use

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

then FilterVal will alway be lower case.

Assuming that title* is always lowercase as well.