Javascript callback and pattern matching help

I am trying to make a simple searcher/highlighter and I am running into difficulties with inconsistent results/nothing happening when I test it out.

I think the biggest gap is my unders开发者_运维百科tanding of how the callback functions should work and what the selectors are able to match.

Ideally when one clicks on the tag, everything should fade out and only the dives with the matching tags in them should reappear. If nothing matches then the nothing found div should appear and the reset should fade veryhtign out and make all the divs (sans nomatch div) reappear unhighlighted.

Anyone provide some clarification on where I can improve?

Edit: See the link in the comments to see my code.

More clarification on problems: Click on a tag (old, photography, guide) and then click on reset. All three parts should reappear but only two do.

Randomly The no results found will show up.

If you select a tag, then search for a different one, the fade ins and outs will be asynchronous.

The problem is that the .fadeout() was on each .workshopentry so would really be 3 fade outs. Therefore the animation complete callback function was being called 3 times as well! So the logic to determine which new entries to show and hide was being executed 3 times and causing the strange multiple fading.

I have updated the jsfiddle with a more robust solution.

Let me know if you need any more explanation of what the JavaScript is doing.

You need to copy your following code

   if (toFadeIn.length < 1) {      //No results found
        toFadeIn.push(noResults);
    }

    $(toFadeIn).each(function(index, div){
        div.fadeIn(1000);       
    });    

inside the callback function of the workshop.fadeout.. like this :

workshop.fadeOut(1000, function() {
        var tags = $('.left ul li', this);
        tags.removeClass('searchMatch');      //reset the search results
        tags.each(function() {                
            if ($(this).text().toLowerCase() === searchTerm.toLowerCase()) {
                $(this).addClass('searchMatch');
                toFadeIn.push($(this).parent().parent().parent());
            }
        });

        if (searchTerm === "") {
            toFadeIn.push(workshop);
        }
        if (toFadeIn.length < 1) {      //No results found
            toFadeIn.push(noResults);
        }

        $(toFadeIn).each(function(index, div){
           div.fadeIn(1000);       
         });    


    });

You see? The fadeout callback was not yet called but you already started going through the toFadeIn array to show the search results. At that time it hadn't even searched through the entries yet.

It's only down to because we are mostly used to sequential code so callbacks take a little bit of head around. But it does work like that. You just keep on putting the code inside the callback ..and then again inside another callback and so on.