Results Advanced

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.
• It is mandatory to provide an accessible label for the meta item icons. This label needs to describe the meaning of the icon in context. For example a label for a calendar icon can be “When” or “Date” and for a map-marker icon the label can be “Where” or “Location”.

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, body and meta (optional) of the search result (see below)
2. The searchTerm

[
    {
        url: 'link', 
        title: 'the title', 
        body: 'the body',
        meta: [
            {
                text: 'meta item text',
                icon: {
                    name: 'mdi-icon-name',
                    label: 'accessible label'
                }
            }
        ]
    }
]

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.',
            meta: [
                {
                    text: '17 september',
                    icon: {
                        name: 'mdi-calendar',
                        label: 'Datum'
                    }
                },
                {
                    text: '19.00 - 20.00',
                    icon: {
                        name: 'mdi-clock',
                        label: 'Tijd'
                    }
                },
                {
                    text: 'Korfbal',
                    icon: {
                        name: 'mdi-soccer',
                        label: 'Sport'
                    }
                },
                {
                    text: 'Alle leeftijden',
                    icon: {
                        name: 'mdi-account',
                        label: 'Voor wie'
                    }
                },
                {
                    text: 'Drieskensacker 1140, Nijmegen',
                    link: 'https://www.google.com/maps/place/Drieskensacker+1140,+6546+MG+Nijmegen',
                    icon: {
                        name: 'mdi-google-maps',
                        label: 'Waar'
                    }
                }
            ]
        },
        { 
            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.',
            meta: [
                {
                    text: '20 september',
                    icon: {
                        name: 'mdi-calendar',
                        label: 'Datum'
                    }
                }
            ]
        },
        { 
            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>