<form class="autocomplete autocomplete__form" method="GET" action="" 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>
This component will show the autocomplete results
To start using this component, some JavaScript is needed to initialize it.
Underneath a jQuery example on how to initialize the autocomplete.
The script needs to be placed in the Additional component(s) script section as documented in How to use.
You need to initialize the autocomplete class by passing a function that will fetch the search results and an url for the default search action.
The function will get the search query as it’s first parameter and a callback as a second parameter. You need to call the callback to show the search results. Pass an array of objects with at least an url and title or with a header to show an header row: [{header: 'Results:'}, {url: 'link', title: 'search result'}].
The default search action will be called when enter is pressed and nothing is selected. The string {query} is replaced with the actual search query.
You can also add the class property. That class is added to the item.
When an item is a search suggestion instead of an actual result then you should add the class search to the item. The item will be rendered with a search icon on the left side to indicate that it is a search suggestion.
autocomplete-search-results-announcer empty. When there are search results the amount of results will be announced via this element.<script>
var autocomplete = new nijmegen.Autocomplete();
$(document).ready(function () {
autocomplete.init(getAutocompleteResults, '?q={query}');
});
function getAutocompleteResults(query, callback) {
var rawResults = [
{ header: 'Zoekresultaten:' },
{ title: 'Finibus<em>' + query + '</em>', url: '?q=1_' + query },
{ title: '<em>' + query + '</em>elementum urna', url: '?q=2_' + query },
{ header: 'Zoeksuggesties:' },
{ title: 'Blandit aliquet<em>' + query + '</em>', url: '?q=3_' + query, class: 'search' },
{ title: query, url: '?q=4_' + query, class: 'search' }
];
var results = rawResults
.slice(0, Math.ceil(Math.random() * 6));
if (results[results.length - 1].header) {
results.pop();
}
callback(results);
}
</script>