Show message when filter does not find output

Question

I’m using the excellent Isotope plugin to filter items from a page.

Filtering occurs according to the classes used in li that are referenced in option. When selecting a filter, correctly referenced elements are displayed, and those that do not match are hidden.

But when the filter does not find any results, it would be necessary to display a message in the place saying "No results found", instead of the empty space.

Watch the Jsfiddle with the code. Select from the "City 4" or "School 4" filter, where the middle column will show no results.

Example:

Answer 1

My first suggestion is to create an item for "no results" and put it together with others. Give it a special class so that it is not visible along with the others (as long as there is no filter, for example):

<li class="sem-resultados">
    Nenhum resultado encontrado
</li>

At first, that alone would be enough for him to stay hidden (for he does not possess the class produkt-element, but in your code before any filtering is done it still remains visible. Then put a rule in your CSS to actually hide it:

.sem-resultados {
    display: none;
}

With an item like this in each column, we go to filtering: whenever the plugin finishes disposing the elements on the screen, the event occurs layoutComplete. In this event, you can count how many elements in each column are visible, and if there are none, show the .sem-resultados:

$(".isotope.full").each(function() {
    var semResultados = $(this).find(".sem-resultados");
    var algumVisivel = $(this).find("li:visible").length > 0;
    semResultados.toggle(!algumVisivel);
});

However, I found two problems with this approach:

1. When the layoutComplete is called, the elements still have the same visibility they had before (because it seems to me that this event occurs before of the smooth transition of the elements, not to their end). This makes it a little but complicated to know if there are any visible elements or not.

   A workaround is to use a setTimeout to execute the above code only after all pending events have already been executed:

   $container.isotope("on", "layoutComplete", function() {
       setTimeout(function() {
           $(".isotope.full").each(function() {
               var semResultados = $(this).find(".sem-resultados");
               var algumVisivel = $(this).find("li:visible").length > 0;
               semResultados.toggle(!algumVisivel);
           });
       }, 500);
   });
   

2. For the same reason, if in the previous filter the "no results" element was visible, in the new one it is shown "above" the elements present until the workaround above is executed, causing an unpleasant visual effect... The solution is to hide the .sem-resultados just before filtration:

    $(".sem-resultados").hide();
    $container.isotope({ filter: selector });
   

Final example. The visual effect can not be the best possible be a bit unpleasant, but it was what I managed given the restrictions imposed by that plugin.

---

Updating: If you don’t mind losing the smooth transition, just assign to zero the property transitionDuration:

$container.isotope({
    itemSelector : '.produkt-element',
    transitionDuration: "0"
});

And so you can put the timeout also in 0 (but you need to keep it anyway). So no delay, just a slight "Flicker"... :)