Inform the number of items filtered via list.js

Question

I start by saying that I am not a developer, but I understand the minimum of JS ... However I am not managing to solve something that in my view seems very simple (I think it is).

Using List.js I was able to configure the filters to filter specific items in the guide-wcag.com/en/ I was able to configure the error message when nothing is found, I was able to configure some keywords and the checkboxes too ...

But I would also like to include the quantity of filtered items (a message should appear, indicating the quantity, as this helps those who are not seeing the content and use a screen reader, for example), but I couldn't do it at all. . :(

The message with the number of items should appear in the same place where the message appears when nothing is found.

I will leave here the excerpts of JS that I used (I repeat, I am not a JS expert, sorry for any wrong syntax).

thanks

var options = {
    valueNames: [ 'ribbon', 'cards-title', 'cards-content', 'principio', 'recomendacao', 'niveis', 'keywords-cards', 'keywords-all' ]
  };

  var listaCards = new List('cards-filter', options);
  var activeFilters = [];
  var noItems = $('<li class="no-results text-center text-destaque-alert" role="alert">No criteria found. Filter again.</li>');

  $('.filter').change(function() {
    var isChecked = this.checked;
    var value = $(this).data("value");

    if(isChecked) {
      activeFilters.push(value);
    } else {
      activeFilters.splice(activeFilters.indexOf(value), 1);
    }

    listaCards.filter(function (item) {
      if(activeFilters.length > 0) {
      return(activeFilters.indexOf(item.values().niveis)) > -1;
    } return true; });

  });

  listaCards.on('updated', function(list) {
    if (list.matchingItems.length == 0) {
      $(list.list).append(noItems);
    } else {
      noItems.detach();
    }
  });

Answer 1

Using the basic examples, I started with the last example and modified your message element.

var foundMessage = list => `Showing: ${list.matchingItems.length}/${list.size()}`;
var notFoundMessage = 'No criteria found. Filter again.';

var $message = $('<p>').addClass('message').attr('role', 'alert');

var options = {
  valueNames: ['name', 'born'],
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [
  { name: 'Jonny Strömberg' , born: 1986 },
  { name: 'Jonas Arnklint'  , born: 1985 },
  { name: 'Martina Elm'     , born: 1986 }
];

var userList = new List('cards-filter', options, values);

userList.add({ name: 'Gustaf Lindqvist', born: 1983 });

userList.on('updated', function(list) {
  if ($('.search').val().trim().length > 0) {
    if (list.matchingItems.length == 0) {
      $message.text(notFoundMessage);
    } else {
      $message.text(foundMessage(list));
    }
    $(list.list).prepend($message);
  }
});

.message { color: #555; font-style: italic; font-size: smaller; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.0.2/list.min.js"></script>
<div id="cards-filter">
  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>
  <ul class="list"></ul>
</div>