Автодополнување на JavaScript

Сега ќе имплементираме автодополнување. Под овој термин се подразбира падачка сугестија при внесување текст во input. Ајде да погледнеме на пример. Подолу направив input, во кој може да се внесе име на држава. При тоа, ако се внесат некои букви, под input-от ќе се појави листа на држави, кои започнуваат со внесениот стринг.

Доколку сакате, може, за да не се внесува целосно името на државата, да кликнете со глувчето на која било држава и таа ќе се појави во input-от. За ова, во принцип, автодополнувањето и е потребно. Во примерот за едноставност направив само три држави: Belarus, Belgium и Bulgaria. Внесете во дадениот input подолу прво симболот 'B' англиски, па потоа 'e' и погледнете што ќе се случи:

Дискусија

Ајде да дискутираме, како да се реши задачата. Треба да се направи низа со имиња на држави. Кај мене таа е ваква:

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

При внесување текст во input, треба при внесување на секој симбол да се пребарува низата со држави и да се добијат држави, кои започнуваат со внесениот стринг. Ова е погодно да се направи со методите filter и startsWith.

Со filter може да се добие низа на држави, кои започнуваат со внесениот стринг. Потоа треба да се премине оваа низа со циклус и да се пополни листата ul со li елементи со држави. И вака треба да се прави на секој внесен симбол, претходно отстранувајќи ги од ul-ката претходно создадените li елементи.

За ваша погодност ја приложувам готовата верстка:

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