Craft search form with optional category select fields

{#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
_includes/library-search-form.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#}
<form action="{{ url('library/results') }}">
  {#? Keywords #}
  <div class="flex flex-wrap mb-6 -mx-3">
    <div class="w-full px-3">
      <label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="keywords">Keywords (Optional)</label>
      <input class="block w-full px-4 py-3 mb-3 leading-tight text-gray-700 border border-gray-200 rounded appearance-none bg-hbblue-100 focus:outline-none focus:bg-white focus:border-gray-500" id="keywords" type="search" name="q">
    </div>
  </div>
  {#? Select Fields #}
  <div class="flex flex-wrap mb-2 -mx-3">

    {#? Program #}
    <div class="w-full px-3 mb-6 md:w-1/5 md:mb-0">
      <label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="programs">
        programs
      </label>
      <div class="relative">
        {% set programs = craft.categories.group('programs').all() %}
        <select class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 border border-gray-200 rounded appearance-none bg-hbblue-100 focus:outline-none focus:bg-white focus:border-gray-500" id="programs" name="programs">
          <option value="">Any program</option>
          {% for entry in programs %}
          <option value="{{ entry.slug }}">{{ entry.title }}</option>
          {% endfor %}
        </select><!-- /# -->
        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
          <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
        </div>
      </div>
    </div>

    {#? Region #}
    <div class="w-full px-3 mb-6 md:w-1/5 md:mb-0">
      <label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="region">
        Region
      </label>
      <div class="relative">
        {% set regions = craft.categories.group('libraryRegions').all() %}
        <select class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 border border-gray-200 rounded appearance-none bg-hbblue-100 focus:outline-none focus:bg-white focus:border-gray-500" id="region" name="region">
          <option value="">Any region</option>
          {% for entry in regions %}
          <option value="{{ entry.slug }}">{{ entry.title }}</option>
          {% endfor %}
        </select><!-- /# -->
        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
          <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
        </div>
      </div>
    </div>
    {#? Year #}
    <div class="w-full px-3 mb-6 md:w-1/5 md:mb-0">
      <label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="year">
        Year
      </label>
      <div class="relative">

        {% set years = craft.categories.group('libraryYears').all() %}
        <select class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 border border-gray-200 rounded appearance-none bg-hbblue-100 focus:outline-none focus:bg-white focus:border-gray-500" id="year" name="year">
          <option value="">Any year</option>
          {% for entry in years %}
          <option value="{{ entry.slug }}">{{ entry.title }}</option>
          {% endfor %}
        </select><!-- /# -->

        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
          <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
        </div>
      </div>
    </div>

    {#? Type #}
    <div class="w-full px-3 mb-6 md:w-1/5 md:mb-0">

      <label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="type">
        Type
      </label>
      <div class="relative">

        {% set types = craft.categories.group('libraryType').all() %}
        <select class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 border border-gray-200 rounded appearance-none bg-hbblue-100 focus:outline-none focus:bg-white focus:border-gray-500" id="type" name="type">
          <option value="">Any type</option>
          {% for entry in types %}
          <option value="{{ entry.slug }}">{{ entry.title }}</option>
          {% endfor %}
        </select><!-- /# -->

        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
          <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
        </div>
      </div>
    </div>

    {#? Language #}
    <div class="w-full px-3 mb-6 md:w-1/5 md:mb-0">
      <label class="block mb-2 font-bold tracking-wide text-hbgray-900" for="language">
        Language
      </label>
      <div class="relative">
        {% set languages = craft.categories.group('languages').all() %}
        <select class="block w-full px-4 py-3 pr-8 leading-tight text-gray-700 border border-gray-200 rounded appearance-none bg-hbblue-100 focus:outline-none focus:bg-white focus:border-gray-500" id="language" name="language">
          <option value="">Any language</option>
          {% for entry in languages %}
          <option value="{{ entry.slug }}">{{ entry.title }}</option>
          {% endfor %}
        </select><!-- /# -->
        <div class="absolute inset-y-0 right-0 flex items-center px-2 text-gray-700 pointer-events-none">
          <svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" /></svg>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-8 text-center">
    <button class="px-10 py-3 font-light text-white rounded-full bg-hbred-500 ladda-button focus:shadow-outline button focus:outline-none" data-color="#8e0124" data-style="zoom-out">Search for documents</button>
  </div><!-- /. -->
</form>

{#
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
library/results.html
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#}
{#
Below, here's what's happening to get the search results:

The user can type a search term, which uses Crafts standard search form.

The user can optionally select dropdown options that represent categories assigned to the entries. For example, if they select the dropdown option "Asia", then Craft will retrieve the results that have the category of "Asia" assigned to them.
#}

{# First extract the search parameters that the user selected out of the URL and save them as variables. Craft automatically posts these to the URL when you run a search, so we pull them out from the Results page thus: #}
{% set keywordParam = craft.app.request.getParam('q') ?? null %}
{% set programParam = craft.app.request.getParam('programs') ?? null %}
{% set regionParam = craft.app.request.getParam('region') ?? null %}
{% set yearParam = craft.app.request.getParam('year') ?? null %}
{% set typeParam = craft.app.request.getParam('type') ?? null %}
{% set languageParam = craft.app.request.getParam('language') ?? null %}

{# ? Results #}
<section class="container p-4 mx-auto">

    {# Get all the categories that have the same names as the parameters we extracted above and save them as variables: #}
    {% set searchQuery = craft.app.request.getParam('q') %}
    {% set daProgram = craft.categories.group('programs').slug(programParam) %}
    {% set daRegion = craft.categories.group('libraryRegions').slug(regionParam) %}
    {% set daYear = craft.categories.group('libraryYears').slug(yearParam) %}
    {% set daType = craft.categories.group('libraryType').slug(typeParam) %}
    {% set daLanguage = craft.categories.group('languages').slug(languageParam) %}

    {# Display the search results using the relatedTo parameter to restrict the results to only those that have the selected categories. If no categories are selected, then it just searches for the search term: #}
    {% paginate craft.entries
    .section('library')
    .search(searchQuery)
    .relatedTo([
        'and',
        { targetElement: daProgram },
        { targetElement: daRegion },
        { targetElement: daYear },
        { targetElement: daType },
        { targetElement: daLanguage },
    ])
    .orderBy('score')
    .limit(10) as pageInfo, pageEntries
    %}

    {% if pageEntries|length %}

    {# Show total results #}
    <h2 class="pl-3 font-bold leading-none tracking-tight text-center md:pl-4 md:mb-12 text-hbblue-500 font-display text-30 md:text-36">{{ pageInfo.total }} results for <span class="text-hbred-500">{{ searchQuery }} {{ programParam }} {{ regionParam }} {{ yearParam }} {{ typeParam }} {{ languageParam }}</span></h2>

    {# Loop through results to display each entry as a card #}
    <div class="flex flex-wrap">
        {% for entry in pageEntries %}
        {% include "_includes/publicationsCard" %}
        {% endfor %}
    </div>

    {# Or show no results if there are none #}
    {% else %}
    <h2 class="pl-3 font-bold leading-none tracking-tight text-center md:pl-4 md:mb-12 text-hbblue-500 font-display text-30 md:text-36">No results for <span class="text-hbred-500">{{ searchQuery }} {{ programParam }} {{ regionParam }} {{ yearParam }} {{ typeParam }} {{ languageParam }}</span></h2>
    {% endif %}


{# ? Pagination #}
{% include "_includes/pagination" with {
    'embedPreviousLabel' : 'Previous Page',
    'embedNextLabel' : 'Next Page',
    'embedHash' : 'main-content'
    }
%}

</section>