Projekt 6:Ajax Type Ahead

Vítejte v mé sérii "Vybudujte 30 Js projektů za 30 dní". Toto je den 6 a projekt 6. Pokud jste nečetli ostatní články v této sérii, podívejte se prosím nejprve na ně. Uvedu je na konci tohoto článku.

Jak bylo zmíněno v mém předchozím článku. Toto je výzva 6. dne kurzu Wes Bos Javascript30.

Konečný výsledek:

Toto je filtr pro město, který je v dnešní době na webových stránkách velmi běžnou funkcí. Zobrazí všechna města, která odpovídají klíčovým slovům zadaným uživatelem.

Můj zdrojový kód

Jako vždy před zahájením stáhněte startovací soubory odtud. Udělal jsem samostatný článek o tom, jak stáhnout startovací soubory, můžete se na něj podívat zde.

ČÁST 1:HTML

Zde jsem vytvořil dva divy, kontejner bude obsahovat nadpis a vyhledávací pole a druhá část div display-part zobrazí seznam podle hodnoty zadané uživatelem.

ČÁST 2:CSS

Nyní upravíme styl našeho projektu. Zde jsem jednoduše použil flex na těle, abych vycentroval náš obsah. Také jsem přidal css do seznamu měst, který bude obsahovat náš seznam, tj. k zobrazení

ČÁST 3:JAVASCRIPT

Nyní uděláme náš projekt interaktivní.
Toto je hlavní část tohoto projektu.
Cílem je přečíst zadání uživatele, zobrazit seznam měst odpovídajících tomuto zadání a poté zobrazit město vybrané uživatelem z tohoto seznamu ve vstupním poli. Také zvýrazníme písmena zadaná uživatelem v seznamu.

Nejprve načteme data z odkazu . Tento odkaz obsahuje naše data ve formátu json. K získání dat z tohoto odkazu použijeme funkci načtení. Také použijeme funkci mapy, podívejte se na tento článek, abyste věděli více, abychom získali nové pole pouze s názvy měst a uložili jej do proměnné měst.

let data=document.getElementById('text');
// fetching 
let cities;
fetch(url,{
    method:'GET',
})
.then(response=>response.json())
.then(text=>{
    cities=text.map(item=>item['city']);

})

Nyní použijeme keyup listener. Tato událost se spustí vždy, když uživatel zadá klíč do prvku (zde textové pole). Poté vygenerujeme výraz regex pomocí regExp a uložíme všechna města odpovídající tomuto výrazu do zobrazení. Poté zavoláme funkci result pro zobrazení seznamu, zvýraznění vstupu uživatelem a změnu hodnoty v textovém poli na hodnotu, na kterou uživatel klikl.

data.addEventListener('keyup',(e)=>{
    if(e.target.value==="") return;
 display=cities.filter(item=>{
     regex=new RegExp(e.target.value,'gi');
     return item.match(regex)

})
result(); //to display list
})

výsledek()-->
Zobrazení a zvýraznění části-
Projdeme naše pole zobrazení a uložíme ho do řetězce, který bude později připojen k naší třídě display-part.
Pro zvýraznění nahradíme u každé položky stejnou část regulárního výrazu za část span a použijeme inline css pro její styl.

let resultdisplay=document.getElementById('list');
 str="";
    for(let item of display)
    {   let city=item.replace(regex,`<span style="background-color:green;">${data.value}</span>`);
        str+=`<ul><button value="${item}" class="city-list">${city}</button></ul><hr>`;  
    } 

    resultdisplay.innerHTML=str;

Všimněte si, že jsem každé položce seznamu přiřadil třídu a hodnotu, která bude později použita k zobrazení města vybraného uživatelem.

Změna zobrazovaného textu textového pole
Nyní vybereme všechny prvky s třídou city-list. Budeme procházet tímto seznamem a naslouchat události u každé položky. Když uživatel klikne na libovolné tlačítko, spustí se událost click a my změníme hodnotu textového pole na hodnotu, na kterou klikl.

try{
    let cityarr=Array.from(document.getElementsByClassName("city-list"));
    for(cityitem of cityarr){
    cityitem.addEventListener('click',(e)=>{
        data.value=e.target.value;
        resultdisplay.innerHTML="";
        //removing list after user chose city
    });}
        }catch(TypeError){
        return;
        }

Použil jsem blok try-catch, jako když uživatel klikne na zvýrazněnou část span, textové pole zobrazí TypeError, protože část span html ve funkci result neměla atribut value->

let city=item.replace(regex,`<span style="background-color:green;">${data.value}</span>

Takže tuto chybu jednoduše zachytíme a vrátíme se ze smyčky.

Věci, které jsem se naučil:

1.keyup event posluchač
2.Jak zvýraznit část prvků seznamu.
3. Lepší porozumění regulárnímu výrazu.

Předchozí článek z této série:

Předně děkuji za skvělou reakci na můj předchozí článek.🥰
Pokud jste to nezkontrolovali, zde je odkaz.:
Projekt 5 den 5

Závěr

To je pro dnešní projekt vše. Dalším projektem bude Array Cardio day2.

Pokud máte nějaké pochybnosti nebo návrhy, dejte mi vědět v sekci komentářů. Rád s vámi budu komunikovat.

Pokud se vám tato série líbí a chcete být její součástí, zvažte mě sledovat na @prachigarg19

Děkuji za přečtení. :)