Auto-dopunjavanje na JavaScript-u

Sada ćemo implementirati auto-dopunjavanje. Pod ovim terminom podrazumeva se padajući iskačući meni sa sugestijama prilikom unosa teksta u input polje. Pogledajmo na primeru. Ispod sam napravio input polje, u koje se može uneti naziv države. Pritim, ako se unesu neka slova, ispod input polja će se pojaviti spisak država, koje počinju na uneti string.

Po želji, da ne bi unosili ceo naziv države, možete kliknuti mišem na bilo koju državu i ona će se pojaviti u input polju. Uopšte, za to nam i služi auto-dopunjavanje. U primeru, radi jednostavnosti, stavio sam samo tri države: Belarus, Belgium i Bulgaria. Unesite u dato input polje ispod prvo slovo 'B' (englesko), a zatim 'e' i pogledajte šta će se desiti:

Diskusija

Hajde da diskutujemo kako rešiti zadatak. Potrebno je napraviti niz sa nazivima država. Moj izgleda ovako:

javascriptlet arr  = ['Belarus', 'Belgium', 'Bulgaria'];

Prilikom unosa teksta u input polje, prilikom svakog unosa slova potrebno je proći kroz niz sa državama i dobiti države, koje počinju na uneti string. To je zgodno uraditi koristeći metode filter i startsWith.

Koristeći filter možemo dobiti niz država koje počinju na uneti string. Zatim je potrebno proći kroz ovaj niz petljom i popuniti listu ul stavkama sa državama. I to je potrebno uraditi pri svakom unosu slova, prethodno uklanjajući iz liste prethodno kreirane stavke.

Za vašu praktičnost, navodim gotovu HTML strukturu (verstku):

html<div id="parent">
  <input id="elem">
  <ul id="list"></ul>
</div>
text text text text text

css#parent {
  position: relative;
}
#elem {
  padding: 5px;
  font-size: 18px;
}

#parent ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: white;
}
#parent li {
  border: 1px solid gray;
  font-size: 18px;
  padding: 5px;
}
#parent li:hover {
  border: 1px solid black;
  cursor: pointer;
}