Using multiple filters without erasing the first

I have two Sprig filters in the one component; first searching for entries, and checkboxes to then filter other entries related to the the selected entries. It’s tough to explain so hopefully my code does it:

{% set search = search ?? '' %}
{% set categorySelect = categorySelect ?? [] %}
{% set categories = craft.entries({section: 'categories', search: search}) %}
{% set articlesQuery = craft.entries({section: 'articles', limit: 20}) %}

{% if categorySelect is not empty %}
    {% do articlesQuery.relatedTo(categorySelect) %}
{% endif %}

{% set articles = articlesQuery.all() %}

<input sprig s-trigger="keyup changed delay:200ms" s-replace="#categories" type="text" name="search" value="{{ search }}">
<div id="categories">
    {% if search %}
        {% for category in categories %}
            <input type="checkbox" sprig s-replace="#articles" name="categorySelect[]" value="{{ category.id }}" {{ category.id in categorySelect ? 'selected' }}>{{ category.title }}
        {% endfor %}
    {% endif %}
</div>
<div id="articles">
    {% for article in articles %}
        {{ article.title }}
    {% endfor %}
</div>

This is working pretty well, with one large exception: I search once, check a category and the entries are filtered. I then want to check another category, but when I search again it clears the entire thing, and categorySelect is empty again.

Is there a way to have categorySelect persist when search changes?

[shifuma]

Nice…this is definitely on the right track now, thank you!

[bencroker]

You can do that, you just need to rewrite the part of the component that outputs the checkboxes. Right now, you’re only outputting category checkboxes based directly on search results. Here’s some new code that should get you started.

{% set categories = craft.entries.section('categories').id(categorySelect).all() %}
{% if search %}
    {% set searchCategories = craft.entries.section('categories').id(['not']|merge(categorySelect)).search(search).all() %}
    {% set categories = categories|merge(searchCategories) %}
{% endif %}

{% for category in categories %}
    <input type="checkbox" sprig s-replace="#articles" name="categorySelect[]" value="{{ category.id }}" {{ category.id in categorySelect ? 'checked' }}>{{ category.title }}
{% endfor %}