@@ -1,32 +1,3 @@
1−// styling of input fields
2−var inputElements = document.querySelectorAll('input.tlon-input');
3−for (var i = 0; i < inputElements.length; i++) {
4− //listen for changes in input
5− inputElements[i].addEventListener('input', function() {
6− // if input has a value do this
7− if (this.value) {
8− var inputContainer = this.parentNode;
9− var validInputs = inputContainer.querySelectorAll('input.tlon-input:valid');
10− var inputs = inputContainer.querySelectorAll('input.tlon-input');
11− if (validInputs.length !== 0) {
12− // has valid input
13− for (var i = 0; i < validInputs.length; i++) {
14− if (this.classList.contains('is-valid') == false ) {
15− validInputs[i].parentNode.classList.add('has-valid-input');
16− }
17− }
18− } else {
19− // doesn't have valid input
20− for (var i = 0; i < inputs.length; i++) {
21− inputs[i].parentNode.classList.remove('has-valid-input');
22− }
23− }
24− } else {
25− this.parentNode.classList.remove('has-valid-input');
26− }
27− });
28−}
29−
301// toggling of navigation menus
312var toggleMainNav = document.getElementById('js-main-nav-toggle');
323if (toggleMainNav !== null) {
@@ -247,6 +218,9 @@ function formatSearchResultItem(item, terms) {
247218
248219function initSearch() {
249220 var searchInput = document.getElementById("search");
221+ var searchForm = document.getElementById("search-form");
222+ var inputReset = searchForm.nextElementSibling;
223+
250224 if (!searchInput) {
251225 return;
252226 }
@@ -271,12 +245,16 @@ function initSearch() {
271245 var searchOverlay = document.getElementById('search-overlay');
272246 var searchWindow = document.getElementById('search-window');
273247 var searchActive = bodyEl.classList.contains('has-active-search-window');
248+
274249 if (toggleSearchWindow !== null) {
275250 toggleSearchWindow.onclick = function() {
251+ inputReset.style.display="none";
252+
276253 //activate search
277254 bodyEl.classList.toggle('has-active-search-window');
278255 //put input in focus when activating search
279256 searchInput.focus();
257+
280258 searchInput.value = "";
281259 searchResultsHeader.value = "";
282260 searchResults.style.display = searchInput.value.trim() === "" ? "none" : "block";
@@ -287,11 +265,13 @@ function initSearch() {
287265 }
288266 })
289267 }
290− // when typing
268+
269+
291270 searchInput.addEventListener("keyup", debounce(function() {
271+ inputReset.style.display="block";
272+
292273 searchResultsHeader.value = "";
293274 var term = searchInput.value.trim();
294−
295275 /*
296276 //removed to fix: a state where there’s a valid search term, but no results
297277
@@ -303,12 +283,14 @@ function initSearch() {
303283 searchResults.style.overflowY = term === "" ? "hidden" : "scroll";
304284 searchResultsItems.innerHTML = "";
305285 if (term === "") {
286+ inputReset.style.display="none";
306287 return;
307288 }
308289
309290 var results = index.search(term, options).filter(function (r) {
310291 return r.doc.body !== "";
311292 });
293+
312294 if (results.length === 0) {
313295 searchResultsHeader.innerText = `No search results for '${term}'.`;
314296 return;
@@ -323,6 +305,17 @@ function initSearch() {
323305 searchResultsItems.appendChild(formatSearchResultItem(results[i], term.split(" ")));
324306 }
325307 }, 150));
308+
309+ // reset input button
310+ inputReset.onclick=function(){
311+ document.getElementById('search-form').reset();
312+ }
313+ searchForm.addEventListener("reset", function(event){
314+ var e = document.createEvent('KeyboardEvent');
315+ e.initEvent("keyup", false, true);
316+ searchInput.dispatchEvent(e);
317+ });
318+
326319}
327320
328321if (document.readyState === "complete" ||