Question

here is my code that works very fine. Found it on a website and modified a little bit.

<script>
(function ($) {
// custom css expression for a case-insensitive contains()
jQuery.expr[':'].Contains = function(a,i,m){
return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
function listFilter(header, list) { // header is any element, list is an unordered list
// create and add the filter form to the header
var form = $("<form>").attr({"class":"filterform","action":"#"}),
input = $("<input>").attr({"class":"filterinput","type":"text", "value":"Filterfunktion"});
$(form).append(input).appendTo(header);
$(input)
.change( function () {
var filter = $(this).val();


if(filter) {
// this finds all links in a list that contain the input,
// and hide the ones not containing the input while showing the ones that do
$(list).find("a:not(:Contains(" + filter + "))").parent().fadeOut();
$(list).find("a:Contains(" + filter + ")").parent().fadeIn();
} else {
$(list).find("li").slideDown();
}
return false;
})
.keyup( function () {
// fire the above change event after every letter
$(this).change();
});
}
//ondomready
$(function () {
listFilter($(".filter"), $(".list"));
});

$(function() {
    $(".filterinput").focus(function() {
      $(this).val('')

      });
 });

}(jQuery));
</script>

But the one thing that I cant get to work, is that the script should find/match a string when its with a whitespace and i type ist without a whitespace.

For exmpale:

I have < li>DCB 112

. When I now type “DCB 112” in my inputfield it filter that correctly and show me that. But when I type “DCB112” the script cant match this and show me nothing. Is there a solution possible?

Greetings from Poland!

Answer 1

Ok, maybe a bit twisted, but what I would do is taking all the links of the list and iterate over them, removing every whitespace of its text, and checking if the text you are looking for is in it. Something like this:

var filter = $(this).val().replace(/\s+/g, '').toLowerCase();

// I'm omitting loads of code...
var text;
var index;
$(list).find('a').each(function(i, el){
    text = $(el).text().replace(/\s+/g, '').toLowerCase();
    index = text.indexOf(filter);
    if(index != -1){
        // The substring is contained -> show parent
    }else{
        // The substring is not contained -> hide parent
    }
});

Hope it helps and it works, as I didn’t tested it :/

EDIT:

Tested and working 🙂

http://jsfiddle.net/QVkuP/