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

Results 

<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>

Search results

This component will show the search results

Notes

  • The titles in this component are rendered via h1 and h2 elements, every heading (h1 - h6) will work so choose your own heading according the structure of the page.

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to initialize the search results. The script needs to be placed in the Additional component(s) script section as documented in How to use.

You need to initialize the searchresults class first with the init function. After that you can call the show function with two parameters:

  1. The results as an array of object with the title, url and body of the search result like [{url: 'link', title: 'the title', body: 'the body'}]
  2. The searchTerm

Note: Everything enclosed in <b></b> tags in the search results body is highlighted.

Example on how to implement:

<script>
    var searchResults = new nijmegen.SearchResults();
    var mockResults = [
        { url: '', title: 'Maecenas ipsum <em>testing</em>', body: 'Lorem ipsum <em>testing</em> dolor sit amet Fusce habitant curabitur dis pulvinar. Accumsan dolor amet primis mattis rutrum risus lorem. In quam euismod sem placerat magnis litora curabitur platea. Tempus iaculis vestibulum urna aptent.' },
        { url: '', title: 'Sagittis est eu lacus <em>testing</em>hac sodales', body: 'Lorem ipsum dolor sit amet fames sit fringilla tempus. Semper aliquam ultrices lacus platea. Consequat imperdiet amet <em>testing</em> faucibus ornare curae. Torquent turpis natoque quam morbi fusce.' },
        { url: '', title: 'Gravida potenti vitae congue', body: 'Lorem ipsum dolor <em>testing</em> sit amet lacus parturient enim tellus. Tristique fusce vitae vulputate aptent consectetur ante dapibus in scelerisque. Laoreet purus eget et orci ad. Parturient <em>testing</em> pede posuere finibus penatibus.' }
    ];
    var searchTerm = 'testing';

    $(document).ready(function () {
        searchResults.init();
        searchResults.show(mockResults, searchTerm);
    });
</script>