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(); } });
Advertisement
Answer
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>