How to clear Isotope search filter with a click of a button in jquery?

Question

I'm trying to clear my search filter without deleting the texts on the search field but by using a button. The search field clears up but the whole items on the grid won't reappear.

I tried to make the clear button a part of the combination filter and add a data-filter="*" but still won't work.

  <div class="button-group js-radio-button-group" data-filter-group="clear">
    <a class="button" id="clearme" data-filter="">Clear</a>
  </div>

Here's the code that I'm using to clear the search field:

$('#clearme').on( 'click', function() {
    $(".quicksearch").val("");
})

And here's the whole codepen

Answer 1

The problem with the isotope re-initialization in the other answer is that after clicking it redefines the filter function, thus the initial function that you wrote gets reset and it stops working, which is a bad idea in your specific use case.

A simple way of doing this without messing with the previously create filter function would be something like this :

$('#clearme').on( 'click', function() {
    $(".quicksearch").val("");
    $(".quicksearch").keyup();
})