Show message when filter does not find output

Asked

Viewed 160 times

4

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: inserir a descrição da imagem aqui

1 answer

4


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"... :)

  • 1

    That way only the column "Post-graduation" appears the message?

  • 1

    @Laerte Not at first, any of the 3 columns should show. Is something not working? If yes, please give me an example of a filter in which the 1st or 3rd column is empty, for me to test.

  • 1

    Filter: City: 5 and School 2.

  • I edited the code and added a filter that gives no results. http://jsfiddle.net/ecpkryae/3/.

  • 1

    @Laerte Aff, by the way a timeout low for some reason is not giving the message... Changing the timeout for 500 it seems to work in all cases, but the delay is visually unpleasant... As for this, I have no idea what to do to improve :(

  • +1 also I have been testing the plugin and did not get better results

  • @Sergio I also tried a solution with pure CSS but did not succeed. By chance you know why li ~ .sem-resultados works but li:visible ~ .sem-resultados doesn’t work?! (regardless of the plugin, filtering, etc., the fact is that the selector seems to be doing nothing - although the element has been visible brothers...)

  • 1

    @mgibsonbr this pseudo is native? I can’t find him on MDN.

  • @Sergio It is explained then, he must be jQuery only... :( It seemed so promising, and I can’t find another way to select by visibility. Thanks!

  • 1

    @mgibsonbr Thank you for the answer and all research upon my question. Even with the effect you didn’t like, the result is exactly what I need. Anything change to version without transition effects. Thank you also for your didactics in answering and explaining everything right. I marked your answer as correct. Thank you :)

Show 5 more comments

Browser other questions tagged

You are not signed in. Login or sign up in order to post.