Søgning med bruger data
Da vi lavede vores design brugte vi statiske data for at kunne se hvordan slutresultatet ville se ud,
men nu når vi vil generere dynamiske data igen skjuler vi først adresser, brugervalg og oplysninger med CSS koden display:none.
Ligesom i de forrige kapitler starter vi med at vise et kort over Danmark, men hvor vi før sendte en forespørgsel afsted til Danmark Servicen med det samme angiver vi istedet hvad der skal ske når brugerdata formularen bliver submittet.
findAdresser funktionen forhindrer i linje 2 at formularen sendes normalt til serveren, da vi gerne vil håndtere datakommunikationen selv.
Derefter finder vi alle indtastningsfelter der har en værdi (value) i linje 4 og bruger jQuery metoden
serialize til at læse dataene, og laver et kald til servicen med vores data i linje 6.
Når vi modtager vores adresser danner vi listen af links i funktionen visAdresser, fra linje 9 til 21.
Vi tømmer listen for eksisterende data i linje 10 og danner et LI element med et link i linjerne 12 til 16. Derefter angiver vi hvad der skal ske ved et klik på listelinket i linje 17 og tilføjer det nye element til vores liste i linje 18.
I linje 20 sørger vi for at listen bliver vist, hvorefter vi finder det første link i listen, sætter fokus på det og klikker på det for brugeren for at få vist det første resultat.
visAdresse funktionen minder om vores tidligere kode, og der bliver dannet en placering og markør. Da vi kun vil vise én adresse af gangen fjerner vi den tidligere markør hvis den findes, hvorefter vi bruger Google Maps metoden panTo for at vise den nye placering, angiver et zoom niveau og gemmer vores nye markør.
Vi sikrer os i linje 34 at brugervalgene er synlige, hvorefter vi sender en ny forespørgsel på de komplette adresseoplysninger i linje 35.
Når vi modtager dem i visOplysninger funktionen danner vi en stor klump HTML i linjerne 39 til 43, der bliver indsat og vist i linje 44.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.