We are now implementing autocompletion. This term refers to a drop-down tooltip when entering text into an input. Let's look at an example. Below I made an input in which you can enter the name of the country. At the same time, if you enter some letters, then a list of countries that begin with the entered string will appear under the input.
If you wish, you can, in order not to enter the
entire name of the country, click on any country
and it will appear in the input. For this, in
general, autocompletion is necessary. In the
example, for simplicity, I made only three
countries: Belarus, Belgium and Bulgaria.
Enter the English character 'B'
into
the input below, and then 'e'
and
see what happens:
Discussion
Let's discuss how to solve the problem. You need to make an array with the countries names. I have it like this:
let arr = ['Belarus', 'Belgium', 'Bulgaria'];
When entering text into the input, you need to
run through the array with countries after each
character entered and get the countries that
start with the entered string.
It is convenient to do this using the methods
filter
and startsWith
.
With filter
you can get an array of countries
starting with the input string. Then you need to
loop through this array and fill the list ul
with li-items with countries. And so you need to do
for each character input, first removing the
previously created li-items from ul-list.
For your convenience, here is the finished layout:
<div id="parent">
<input id="elem">
<ul id="list"></ul>
</div>
text text text text text
#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;
}
Copy the provided HTML and CSS codes. Implement auto-completion according to the described algorithm.