Nijmegen Component Library
You are viewing version 2 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">zoekterm</span>"
    </h1>
    <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

Using

To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to initialize the search results and the search result script itself. Both scripts need 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 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>

Search results script:

<script>
    function SearchResults() {
        this.resultItemTemplate;
        this.searchResultsList;
    }

    SearchResults.prototype.init = function () {
        this.searchResultsList = $('#search-results');
        this.searchTermContainer = $('#search-term');
        this.resultItemTemplate = $.parseHTML($('#search-results-item-template').html());
    }

    SearchResults.prototype.show = function (results, searchTerm) {
        this.searchResultsList.html('');
        this.searchTermContainer.text(searchTerm);

        for (var key in results) {
            var resultItem = $(this.resultItemTemplate).clone();
            var result = results[key];
            $('.search-results__item-link', resultItem).attr('href', result.url);
            $('.search-results__item-title', resultItem).html(result.title);
            $('.search-results__item-body', resultItem).html(result.body);
            this.searchResultsList.append(resultItem);
        }
    }
</script>