Filtering using a class or data attribute using List.js

Question

If I have an HTML list like this:

<div id="my-list">
    <ul class="list">
        <li data-cat="fish">Cod</li>
        <li data-cat="fish">Salmon</li>
        <li data-cat="bird">Crow</li>
    </ul>
</div>

Is it possible to filter it based on the contents of the data-cat attribute using List.js?

All the examples I've seen only allow searching/filtering based on visible HTML content, but I'd like to filter based on the content of a data element, as here, or maybe the list item's class. I can't see how to do this though.

Answer 1

If you want to use jQuery instead of list.js to find and hide/show elements with matching classes/data elements as you commented here, you can simply use .filter.

For example, if you want to hide the items with fish as data-cat:

$('.list li').filter('[data-cat="fish"]').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="my-list">
    <ul class="list">
        <li data-cat="fish">Cod</li>
        <li data-cat="fish">Salmon</li>
        <li data-cat="bird">Crow</li>
    </ul>
</div>