Question

I am using JQuery to implement a dynamic search option, where as the user types in the searched text, the list starts to SlideUp() those elements that don’t match, and SlideDown() those that do. I used this site as base, and got it working pretty good, except for one small yet nerving detail.

When i type in a text which for example SlidesUp 2 out of 5 of the lists elements, then when i erase the previously typed in text, then only 4 of them appear (instead of the original 5).
And it is not always the same element the one that remains hidden at the end.

This is my relevant code:

$("#searchTextBoxId").change(function(){}).keyup( function () {
    $(this).change();
});
$("#searchTextBoxId").change(function(){
    var filter = $("#searchTextBoxId").val();
    if (filter){$("#ajaxListView").find("name:not(:Contains("+filter+"))").parent().parent().slideUp();$("#ajaxListView").find("name:Contains("+filter+")").parent().parent().slideDown();      
    }else{
    $("#ajaxListView").find('untipodedom').slideDown();
    $("#mst").text("Amount of elements: "+$("#ajaxListView").find('untipodedom').length);       
    }
}); 

It is even wierder the fact that the output text says 5 (the amount of div’s it should be showing). Any ideas???

Answer 1

Ok, it took a LONG while to figure this out. It turned out to be something quite silly. I post this in case it eventually turns out to be helpful for someone.

In the “else” case, the jquery “find” selector wasn’t selecting correctly. I changed it to the following:

function SlideUpAndDown(filter){
    if (filter){
        $("#cListView").find("name:not(:Contains("+filter+"))").parent().parent().slideUp();
        $("#cListView").find("name:Contains("+filter+")").parent().parent().slideDown();
    } else {
        $("#cListView").find("*").parent().parent().slideDown();            
    }
}

I used the universal selector ‘*’ in order to select all the items in the CListView. Thats it, works like a charm.