How to use Sprig to filter categories using a dropdown

Question

I'm having an issue where I'm adding a dropdown to my search to filter through the first parent attribute in a category (Winter 2020, Spring 2021, and so on). The search field works, but nothing happens if I select from the dropdown (Winter 2020).

What am I missing?

{% set search = search ?? ''%}
{% set category = category ?? ''%}

{% set entryQuery = craft.entries ({
    search: search,
    section: 'articles',
    limit: 2, 
    }) %}


{% set myCategoryQuery = craft.categories ({
    group: 'edition', 
    level: 1,
    }) %}

{% set entries = entryQuery.all() %}
{% set categories = myCategoryQuery.all() %}



<div s-replace="#board">
<form>
    <input sprig s-trigger="keyup changed delay:200ms" id="search" name="search" value="{{ search }}" type="text" placeholder="Search" autocomplete="off">
    <select sprig name="category" id="category" value="{{ category }}" class="form-control">
      <option value="">Any</option>
        {% for category in categories %}
          <option value="{{ category }}">{{ category }}</option>
        {% endfor %}
    </select>
  </form>

    <div id="board">
        {% for entry in entries %}
        <div class="mt-4 mb-4">
          {% for category in entry.edition.all()%}
            <strong> {{ category }}</strong>
          {% endfor %}
          <div>{{entry.title}}</div>
          {% for category in entry.authors.all() %}
          {{ category.title }},
          {% endfor %}
        </div>
        {% endfor %}
        {% if entries|length == 0 %}
      <div>No entries found </div>
        {% endif %}
        <div>
      </div>
    </div>
  </div>

Answer 1

You need to apply the category filter to the entry query.

{% set categoryId = categoryId ?? '' %}

{% set entryQuery = craft.entries ({
    search: search,
    section: 'articles',
    limit: 2,
    relatedTo: categoryId,
}) %}

And also update the select field to match.

    <select sprig name="categoryId" id="category" value="{{ categoryId }}" class="form-control">
      <option value="">Any</option>
        {% for category in categories %}
          <option value="{{ category.id }}">{{ category }}</option>
        {% endfor %}
    </select>

See the Sprig filters video for an explanation of how to output and use categories as filters:
https://putyourlightson.com/sprig/videos#sprig-filters