Nijmegen Component Library
You are viewing version 3 of the library, the latest version is

Searchresults Template 

<nav class="navbar fixed-top navbar-expand-lg scrolling-navbar navbar-primary">
    <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="/v3/img/beeldmerklabelwit.svg" class="logo-labeled" alt="Logo Nijmegen">
                <img src="/v3/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 smooth-scroll">
                <li class="nav-item">
                    <a href="#section-1" class="nav-link">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a href="#section-2" class="nav-link">Menu 2</a>
                </li>
                <li class="nav-item">
                    <a href="#section-3" class="nav-link">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a href="#section-4" class="nav-link">Menu 4</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" role="listbox">

                </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" 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">
                <section class="facets" id="facets" role="navigation">
                    <h1 class="facets__title">Filter results</h1>
                    <div class="facets__facets">
                    </div>
                </section>

                <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">
                    <!-- Space for other content/links -->
                </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-box" 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-box" 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="/v3/img/beeldmerkwit.svg" height="32" width="25" class="logo-labeled" alt="Logo Gemeente Nijmegen"> Gemeente Nijmegen
        </div>
    </div>
</footer>

Searchresults Template

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:

<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);
        pandosearch.showHits();

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

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

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.