Automatické doplňování v JavaScriptu

Nyní implementujeme automatické doplňování. Pod tímto pojmem se rozumí rozbalovací nápověda při zadávání textu do vstupního pole. Podívejme se na příklad. Níže jsem vytvořil vstupní pole, do kterého lze zadat název země. Přitom, pokud zadáte nějaká písmena, pod vstupním polem se objeví seznam zemí, které začínají na zadaný řetězec.

V případě zájmu lze, aby nebylo nutné zadávat celý název země, kliknout myší na libovolnou zemi a ta se objeví ve vstupním poli. K tomu, obecně řečeno, automatické doplňování slouží. V příkladu pro jednoduchost jsem vytvořil pouze tři země: Belarus, Belgium a Bulgaria. Zadejte do níže uvedeného vstupního pole nejprve znak 'B' anglické, a poté 'e' a podívejte se, co se stane:

Diskuse

Pojďme diskutovat o tom, jak úlohu řešit. Je třeba vytvořit pole s názvy zemí. U mě je takové:

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

Při zadávání textu do vstupního pole je třeba při zadání každého znaku procházet pole se zeměmi a získávat země, které začínají na zadaný řetězec. To je vhodné dělat pomocí metod filter a startsWith.

Pomocí filter lze získat pole zemí začínajících na zadaný řetězec. Poté je třeba projít toto pole cyklem a naplnit seznam ul položkami se zeměmi. A tak je třeba dělat při každém zadání znaku, předtím odstranit z ul dříve vytvořené položky.

Pro vaše pohodlí uvádím hotové rozvržení:

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