From a74d7be72a9da487fa8561f1c05c0f3a64f9caba Mon Sep 17 00:00:00 2001 From: Audrey Magwili Date: Fri, 28 Jun 2019 14:32:01 -0700 Subject: [PATCH 1/2] create new DOM nodes --- ajax-type-ahead/script.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/ajax-type-ahead/script.js b/ajax-type-ahead/script.js index 3f7ede2..42a85ca 100644 --- a/ajax-type-ahead/script.js +++ b/ajax-type-ahead/script.js @@ -11,8 +11,8 @@ fetch(endpoint) function matchWord(wordToMatch, cities) { return cities.filter(place => { - const regex = new RegExp(wordToMatch, 'gi'); - return place.city.match(regex) || place.state.match(regex); + const regex = new RegExp(wordToMatch, 'gi'); + return place.city.match(regex) || place.state.match(regex); }); } @@ -24,14 +24,14 @@ function displayMatch() { newSearchSuggestions.classList.add('suggestions'); matchArray.forEach((match) => { - let suggestionEl = document.createElement('li'); - let populationEl = document.createElement('span'); + let suggestionEl = document.createElement('li'); + let populationEl = document.createElement('span'); - suggestionEl.textContent = `${match.city}, ${match.state}` - populationEl.textContent = `${match.population}`; - suggestionEl.appendChild(populationEl); + suggestionEl.textContent = `${match.city}, ${match.state}` + populationEl.textContent = `${match.population}`; + suggestionEl.appendChild(populationEl); - newSearchSuggestions.appendChild(suggestionEl); + newSearchSuggestions.appendChild(suggestionEl); }); searchForm.appendChild(newSearchSuggestions); From 923190e928f243c47c1ace9d5de00fb277a306e0 Mon Sep 17 00:00:00 2001 From: Audrey Magwili Date: Fri, 28 Jun 2019 16:07:31 -0700 Subject: [PATCH 2/2] debounce function --- ajax-type-ahead/script.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/ajax-type-ahead/script.js b/ajax-type-ahead/script.js index 42a85ca..5a64770 100644 --- a/ajax-type-ahead/script.js +++ b/ajax-type-ahead/script.js @@ -24,20 +24,35 @@ function displayMatch() { newSearchSuggestions.classList.add('suggestions'); matchArray.forEach((match) => { - let suggestionEl = document.createElement('li'); - let populationEl = document.createElement('span'); + let suggestionEl = document.createElement('li'); + let populationEl = document.createElement('span'); - suggestionEl.textContent = `${match.city}, ${match.state}` - populationEl.textContent = `${match.population}`; - suggestionEl.appendChild(populationEl); + suggestionEl.textContent = `${match.city}, ${match.state}` + populationEl.textContent = `${match.population}`; + suggestionEl.appendChild(populationEl); - newSearchSuggestions.appendChild(suggestionEl); + newSearchSuggestions.appendChild(suggestionEl); }); searchForm.appendChild(newSearchSuggestions); searchSuggestions = searchForm.querySelector('.suggestions'); } +// debounce from https://davidwalsh.name/javascript-debounce-function +function debounce(func, wait, immediate) { + var timeout; + return function() { + var context = this, args = arguments; + var later = function() { + timeout = null; + if (!immediate) func.apply(context, args); + }; + var callNow = immediate && !timeout; + clearTimeout(timeout); + timeout = setTimeout(later, wait); + if (callNow) func.apply(context, args); + }; +}; searchInput.addEventListener('change', displayMatch); -searchInput.addEventListener('keyup', displayMatch); +searchInput.addEventListener('keyup', debounce(displayMatch, 200));