Jak jsem pomocí Ajaxu provedl vyhledávací filtr pro město nebo stát

Ahoj všichni 👋,
dnes vysvětlím své řešení pro další výzvu, kterou vytvořil Wes Bos - "JavaScript 30".
Tato výzva byla zajímavá, protože jsem provedl recenzi na důležité záležitosti, jako je Ajax, sliby, načítání, regex, metody pole a metody řetězců, operátor spread.

Začněme!

1. Soubor HTML je jednoduchý se značkou formuláře, která obsahuje vstup, kterým je vyhledávač, a seznam, který obsahuje návrhy na základě vyhledávání.

Hotovo a styl CSS (můžete zkontrolovat na mém úložišti GitHub na konci článku), začneme s JavaScriptem:

2. Nejprve jsem přiřadil adresu URL externích dat do proměnné nazvané endpoint.

3. Vytvořil jsem další proměnnou nazvanou města, která má jako hodnotu prázdné pole.

4. Vytvořil jsem také proměnnou nazvanou prom(slib), abych načetl data, která pocházejí z externího zdroje, a vložil položky těchto dat do prázdného pole - konstanta měst .
K tomu jsem použil operátor spread, protože pokud bych to neudělal, vložilo by to vnořené pole do prázdného pole a my jsme potřebovali, aby každá položka šla do prázdného pole.

Poznámka k operátoru spread:

f(...iterableObj);

[...iterableObj, 4, 5, 6]

[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

5. Vytvořil jsem funkci, která je zodpovědná za nalezení města nebo státu, který odpovídá tomu, co bylo hledané.
Tato funkce má dva argumenty, jeden je slovo, které se má shodovat, a druhý je pole měst.
Uvnitř funkce jsem použil metodu pole - Filtr - která vrací filtrované pole.
Uvnitř jsem použil match() metoda

const regex = new RegExp( wordToMatch, 'gi')

Pak jsem tuto proměnnou použil jako argument uvnitř metody shody pro město a také pro stát

return place.city.match(regex) || place.state.match(regex)

Tato funkce vrátí malé pole se shodnými městy nebo státy toho, co jsme hledali.

6. Přes DOM jsem přistupoval k vstupním prvkům 'search' a ul 'suggestions' a pomocí změny jsem do vstupu 'search' přidal posluchače události událost a další pomocí klávesy událost a funkci nazvanou displayMatches, kterou jsem poté vytvořil.

const searchInput = document.querySelector('.search')
const suggestions = document.querySelector('.suggestions')

searchInput.addEventListener('change', displayMatches)
searchInput.addEventListener('keyup',displayMatches)

Funkce displayMatches nejprve vezme výsledek funkce findMatches a přiřadí jej proměnné nazvané matchArray.

const matchArray = findMatches(this.value, cities)

Poté jsem vytvořil další proměnnou nazvanou HTML, která bude zodpovědná za vytvoření HTML výsledku nového filtrovaného pole.
Nejprve proměnná HTML získá proměnnou matchArray a provede mapu (metoda pole – metoda map() vytvoří nové pole s výsledky volání funkce pro každý prvek pole.)
vytvořit značku li se dvěma značkami span, jednou pro město a stát a druhou pro obyvatelstvo.

const html = matchArray.map(place =>{
  return `<li>
             <span class="name"> ${place.city}, ${place.state}</span>
             <span class="population">${place.population}</span>
          </li>
         `
}

Poté získáme proměnnou návrhu innerHTML, která představuje ul a přiřadí proměnnou HTML.

suggestions.innerHTML = html

V tuto chvíli již vidíme výsledky poté, co něco napíšeme do vyhledávání.

7. Poté už zbývalo jen vybarvit pozadí písmen, které odpovídá tomu, co je napsáno ve vyhledávání, a vložit čárku do počtu obyvatel 3 ze 3 čísel.

Uvnitř funkce displayMatches, uvnitř mapy a před návratem jsem vytvořil proměnnou nazvanou regex, která vytvoří konstruktor regulárního výrazu vstupní skutečné hodnoty.

const regex = new RegExp(this.value, 'gi')

pak jsem vytvořil dvě proměnné, jednu pro město, druhou pro stát, která nahrazuje jednotlivý prvek vlastnosti město a stát z pole měst a nahradí vše, co odpovídá v regulárním výrazu, a nahradí to názvem třídy span 'hl'(zvýraznění) a hodnotu, kterou osoba hledala.

const cityName = place.city.replace(regex, `<span class="hl">${this.value}</span>`)

Potom můžeme místo.city a place.state uvnitř doslovné šablony nahradit proměnnými cityName a stateName.

return `
       <li>
           <span class="name">${cityName},${cityState}</span>
           <span class="population">${place.population}</span>
       </li>
      `

8. Nakonec jsem vytvořil funkci, která je zodpovědná za vkládání čárek do počtu obyvatel.

function numberWithCommas(x) {
   return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
}

return `<li>
            <span class="name">${cityName}, ${stateName}</span>
            <span class="population">${numberWithCommas(place.population)}</span>
        </li>
       `

Celý kód si můžete zkontrolovat zde a demo zde