Searchresults Template

<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary"> <ul class="navbar-skiplinks"> <li> <a href="#suggest-search-query">Skip to search</a> </li> <li> <a href="#section-1 ">Skip to content</a> </li> </ul> <div class="container"> <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-controls="navbar-collapse" aria-expanded="false"> <span class="sr-only">Menu</span> <span class="navbar-toggler-icon" aria-hidden="true"></span> </button> <a class="navbar-brand" href="/"> <span class="sr-only">Hoofdpagina</span> <div class="navbar-brand-container"> <img src="/v6.0.0/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen"> <img src="/v6.0.0/img/beeldmerkwit.svg" class="logo" aria-hidden="true" alt=""> </div> </a> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="navbar-nav mr-auto nijmegen-smooth-scroll"> <li class="nav-item"> <a href="/v6.0.0/components/preview/navbar--default.html#section-1" class="nav-link">One</a> </li> <li class="nav-item"> <a href="/v6.0.0/components/preview/navbar--no-search.html#section-2" class="nav-link">Two</a> </li> <li class="nav-item"> <a href="#section-3" class="nav-link">Three</a> </li> <li class="nav-item"> <a href="#section-4" class="nav-link">Four</a> </li> <li class="nav-item"> <a href="https://nijmegen.nl" class="nav-link">External</a> </li> </ul> </div> <div class="navbar__search"> <button class="navbar__search-button" id="navbar-open-search"> <span class="sr-only">Open zoekveld</span><span class="mdi mdi-magnify" aria-hidden="true"></span> </button> <form class="autocomplete autocomplete__form" method="GET" action="searchresults-template.html" role="search"> <input class="autocomplete__input form-control" type="text" placeholder="Zoeken" id="suggest-search-query" name="q" autocomplete="off" aria-controls="autocomplete-results" aria-autocomplete="both" aria-label="Zoekveld" aria-describedby="autocomplete-help-text" /> <button class="autocomplete__search-button" aria-label="Zoekknop"> <span class="mdi mdi-magnify" aria-hidden="true"></span> </button> <button class="autocomplete__clear-button autocomplete__button--hide" aria-label="Invoer wissen" title="Invoer wissen"> <span class="mdi mdi-close" aria-hidden="true"></span> </button> <ul id="autocomplete-results" class="autocomplete__result-list" aria-label="Zoekresultaten"> </ul> <span id="autocomplete-help-text" class="sr-only"> Als er zoekresultaten gevonden zijn kunt u de pijltjes toetsen omhoog en naar beneden gebruiken om een resultaat te selecteren. Toets enter om te navigeren naar het geselecteerde resultaat. Met de escape toets kunt u de invoer wissen.</span> <div id="autocomplete-search-results-announcer" aria-live="assertive" aria-atomic="true" class="sr-only"></div> </form> <script id="autocomplete-result-template" type="text/template"> <li class="autocomplete__result-item" role="option"> <a href="" class="autocomplete__result-link" id="" tabindex="-1"></a> </li> </script> <script id="autocomplete-section-header-template" type="text/template"> <li class="autocomplete__section-header" aria-hidden="true"> </li> </script> <button class="navbar__search-close-button" id="navbar-close-search" aria-label="Sluit zoekveld"> sluiten </button> </div> </div> </nav> <main> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-12"> <nav class="facets" id="facets" aria-labelledby="facets-title"> <button class="facets__title" id="facets-title">Filter results</button> <div class="facets__facets"> </div> </nav> <script id="facets-group-template" type="text/template"> <div class="facets__group"> <h2 class="facets__group-title"></h2> <ul class="facets__list"> </ul> </div> </script> <script id="facets-item-template" type="text/template"> <li class="facets__item"> <a class="facets__link" href=""></a> </li> </script> </div> <div class="col-lg-9 col-md-12"> <div id="loading">Bezig met laden van de zoekresultaten..</div> <div id="searchresults"> <section class="search-results"> <h1 class="search-results__title"> Zoekresultaten voor "<span class="search-results__term" id="search-term"></span>" </h1> <p id="search-noresults" class="search-results__noresults"> Geen resultaten gevonden <span id="search-didyoumean" class="search-results__didyoumean"> , resultaten voor "<span id="search-term-didyoumean"></span>" worden getoond. </span> </p> <ul id="search-results" class="search-results__list"></ul> </section> <script id="search-results-item-template" type="text/template"> <li class="search-results__item"> <a href="" class="search-results__item-link"> <h2 class="search-results__item-title"></h2> </a> <div class="search-results__item-body"> </div> </li> </script> <div class="search-results__pagination"> <nav aria-label="Pagina navigatie"> <ul class="pagination" id="pagination"> <li class="page-item page-item-previous"> <a class="page-link" href=""> <span aria-hidden="true"> <span class="mdi mdi-chevron-left" aria-hidden="true"></span> </span> <span class="sr-only">Vorige</span> </a> </li> <li class="page-item page-item-next"> <a class="page-link" href=""> <span aria-hidden="true"> <span class="mdi mdi-chevron-right" aria-hidden="true"></span> </span> <span class="sr-only">Volgende</span> </a> </li> </ul> </nav> </div> </div> </div> </div> </div> </main> <script id="pagination-item-template" type="text/template"> <li class="page-item"> <a class="page-link" href=""></a> </li> </script> <script id="pagination-item-current-template" type="text/template"> <span class="sr-only">(huidig)</span> </script> <footer class="page-footer"> <div class="footer-content"> <div class="container"> <div class="row"> <div class="hidden-md-down col-lg-6">  </div> <div class="col-md-12 col-lg-6"> <div class="row"> <div class="hidden-md-down col-lg-5"> <h2 class="title">Over deze site</h2> <ul class="link-list"> <li><a href="https://www.nijmegen.nl/toegankelijkheid/">Toegankelijkheid</a></li> <li><a href="https://www.nijmegen.nl/privacyverklaring/">Privacyverklaring</a></li> <li><a href="https://www.nijmegen.nl/cookies/">Cookies</a></li> <li><a href="https://www.nijmegen.nl/proclaimer/">Proclaimer</a></li> <li><a href="https://www.nijmegen.nl/sitemap/">Sitemap</a></li> </ul> </div> <div class="col-xs-12 col-md-6 col-lg-7"> <h2 class="title">Contactgegevens</h2> <ul class="link-list contact-list"> <li> <span class="mdi mdi-map-marker" aria-hidden="true"></span> <span class="sr-only">Bekijk onze locatie:</span> <a href="https://www.google.nl/maps/place/..."> Stadswinkel, Mariënburg 30 </a> </li> <li> <span class="mdi mdi-phone" aria-hidden="true"></span> <span class="sr-only">Bel ons:</span> <a href="tel:14024"> 14 024 </a> </li> <li> <span class="mdi mdi-email" aria-hidden="true"></span> <span class="sr-only">Mail ons:</span> <a href="mailto:gemeente@nijmegen.nl"> gemeente@nijmegen.nl </a> </li> <li> <span class="mdi mdi-facebook" aria-hidden="true"></span> <span class="sr-only">Vind ons op facebook:</span> <a href="https://www.facebook.com/gemeentenijmegen"> Gemeente Nijmegen </a> </li> <li> <span class="mdi mdi-twitter" aria-hidden="true"></span> <span class="sr-only">Volg ons op Twitter:</span> <a href="https://twitter.com/gem_nijmegen"> @nijmegen </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="footer-copyright text-center"> <div class="container-fluid"> <img src="/v6.0.0/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt="Logo Gemeente Nijmegen"> Gemeente Nijmegen </div> </div> </footer>

A custom template created for Nijmegen to showcase the search results component from this library in one overall view.

Using

Aside from the markup, some extra actions are needed.

Pandosearch integration

For the search a real-time feed is provided by Pandosearch.

Example on how to implement:

Please note: The line pandosearch.doNotTrack = true; should be removed on production.

<script>
    var facetsTranslations = {
        docType: 'Document type',
        page: 'Pagina',
        pdf: 'PDF bestand',
        category: 'Categorie',
        published: 'Publicatiedatum',
        today: 'Vandaag',
        older: 'Ouder',
        lastweek: 'Laatste week',
        lastmonth: 'Laatste maand',
        lastyear: 'Laatste jaar',
        lastday: 'Laatste dag',
    };

    var facetSortingOrder = {
        today: 1,
        lastday: 2,
        lastweek: 3,
        lastmonth: 4,
        lastyear: 5,
        older: 6,
    };

    var pandosearch = new nijmegen.Pandosearch(5);
    $(document).ready(function () {
        pandosearch.init(facetsTranslations, facetSortingOrder);
        // Remove the following line on production!
        pandosearch.doNotTrack = true;
        pandosearch.showHits();

        $(window).on('hashchange', function () {
            pandosearch.showHits();
        });

        $('#suggest-search-query').val(pandosearch.query);
        autocomplete.setSearchIcon();
    });
</script>

Accessibility - Skiplinks

There are a few cases where it is recommended to implement an inline skiplink just above the facets:

When a page doesn’t refresh after searching
When there is no generic skiplink implemented (like the navbar skiplink).

In those cases a keyboard user needs to tab over all facets before he/she will reach the search results. With an inline skiplink the user can skip over all the facets directly to the top of the search results.

Notes

Used components: see the “References” in the component library info tab
Nijmegen has a collaboration with Pandosearch (https://www.pandosearch.com) for the search and search results implementation, as can be read in the Using section here.