Samodejno dopolnjevanje v JavaScript

Zdaj bomo implementirali samodejno dopolnjevanje. Pod tem izrazom razumemo spustni namig pri vnosu besedila v vnosno polje. Poglejmo na primeru. Spodaj sem naredil vnosno polje, v katerega je mogoče vnesti ime države. Pri tem, če vneseš nekaj črk, se pod vnosnim poljem prikaže seznam držav, ki se začnejo z vnesenim nizom.

Po želji je mogoče, da ni treba vnesti v celoti ime države, klikniti z miško na katero koli državo in ta se bo prikazala v vnosnem polju. Za to, na splošno, je samodejno dopolnjevanje potrebno. V primeru za enostavnost sem naredil samo tri države: Belarus, Belgium in Bulgaria. Vnesite v spodnje vnosno polje najprej znak 'B' angleški, nato pa 'e' in poglejte, kaj se bo zgodilo:

Razprava

Razpravljajmo, kako rešiti nalogo. Potrebno je narediti seznam z imeni držav. Pri meni je takšen:

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

Pri vnosu besedila v vnosno polje je ob vsakem vnosu znaka potrebno prebrskati seznam z državami in dobiti države, ki se začnejo z vnesenim nizom. To je priročno narediti z metodama filter in startsWith.

Z filter je mogoče dobiti seznam držav, ki se začnejo z vnesenim nizom. Nato je potrebno prebrskati ta seznam z zanko in zapolniti seznam ul z elementi li z državami. In tako je potrebno narediti ob vsakem vnosu znaka, predhodno odstranivši iz seznama ul prej ustvarjene elemente li.

Za vašo priročnost prinašam pripravljeno razporeditev:

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;
}