hiding element when result are empty

[ChaerilM]

Question / Help request how do i do this?, emptyTemplate doesn't seem to be able to handle it. and I cannot find any event that could help as each event callback will run as many as sources

Describe the solution you'd like

  emptyTemplate: function (query) {
      if (query.length == 0) {
            $('table.table').addClass('d-none');
            $('nav.pagination').addClass('d-none');
            $('.empty-result').removeClass('d-none');
      }
  },

Describe alternatives you've considered

emptyTemplate, onLayoutBuiltAfter, onPopulateSource
// last resort and hacky way
    onPopulateSource: function(node, data, group, path) {
        sessionStorage.setItem('search-'+group, data.length);

        let countOrder= sessionStorage.getItem('search-Order No');
        let countCustomer = sessionStorage.getItem('search-Customer');
        if (countOrder == 0 && countCustomer == 0) {
            $('table.table').addClass('d-none');
            $('nav.pagination').addClass('d-none');
            $('.empty-result').removeClass('d-none');
        } else {
            $('table.table').removeClass('d-none');
            $('nav.pagination').removeClass('d-none');
            $('.empty-result').addClass('d-none');
        }
        return data;
    },

Additional context

Fork a Typeahead starter from CodeSandbox and provide an example describing the issue

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.