<div class="suggestion-search"> <label class="suggestion-search__icon" for="suggestion-search"> <?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 12 12"><g class="suggestion-search__svg" stroke-width="2" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg> </label> <input class="uikit-text-input uikit-text-input--block suggestion-search__input" placeholder="{{ include.placeholder }}" id="suggestion-search" type="text"> </div> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function(e) { var filterDuplicateResults = function(matches) { return matches.filter((match, pos, arr) => arr.findIndex(elm => elm.link === match.link) === pos); }; var customSearcher = function(data) { return function findMatches(query, callback) { var matches; var substringRegex; matches = []; substrRegex = new RegExp(query, 'i'); data.forEach(function(elm, index) { if (substrRegex.test(elm.shortDescription)) { matches.push(elm); } }); refinedMatches = filterDuplicateResults(matches); callback(refinedMatches); }; }; $('.suggestion-search__input').typeahead({ classNames: { wrapper: 'suggestion-search__root', menu: 'suggestion-search__menu', cursor: 'suggestion-search__item--highlighted' }, hint: true, highlight: true, minLength: 1 }, { name: 'data', source: customSearcher(searchResults), display: 'shortDescription', limit: 5, templates: { suggestion: function(result) { return `<div role="option" aria-selected="false" class="suggestion-search__item"><a class="suggestion-search__link" href="${result.link}">${result.shortDescription}</a></div>`; }, } }); $('.suggestion-search__input').bind('typeahead:select', function(e, suggestion) { window.location.href = suggestion.link; }); }); </script>