[Clique aqui para ler em português]
Let’s create an autocomplete so that clicking on an input displays a suggestion list
Code
First let’s create the interface, we’ll do something simple, using just HTML.
<div>
<label for="input">Input</label>
<input type="text" id="input" />
<ul id="suggestions"></ul>
</div>
We have a div and inside we have a label, an input and a ul, this input will be where we will type the information and when the information matches the list we have it will be displayed in ul
(function () {
"use strict";
let inputField = document.getElementById('input');
let ulField = document.getElementById('suggestions');
inputField.addEventListener('input', changeAutoComplete);
ulField.addEventListener('click', selectItem);
function changeAutoComplete({ target }) {
let data = target.value;
ulField.innerHTML = ``;
if (data.length) {
let autoCompleteValues = autoComplete(data);
autoCompleteValues.forEach(value => { addItem(value); });
}
}
function autoComplete(inputValue) {
let destination = ["Italy", "Spain", "Portugal", "Brazil"];
return destination.filter(
(value) => value.toLowerCase().includes(inputValue.toLowerCase())
);
}
function addItem(value) {
ulField.innerHTML = ulField.innerHTML + `<li>${value}</li>`;
}
function selectItem({ target }) {
if (target.tagName === 'LI') {
inputField.value = target.textContent;
ulField.innerHTML = ``;
}
}
})();
We have four functions:
- changeAutoComplete = In this function we will have the input values, we check if there is any text, we call the autocomplete function, with the return of the autocomplete function we do a loop and add the item using the additem() function;
- autoComplete = In this function we have a target array and with the data passed we check if the typed text exists in some value of the target array, if it exists it is returned;
- addItem = Here the received value is added directly to ul;
- selectItem = This function is activated by clicking on the item list, thus directly choosing the selected item;
ready simple like that.
Demo
See below for the complete working project.
Youtube
If you prefer to watch it, see the development on youtube.
References:
Thanks for reading!
If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!
😊😊 See you later! 😊😊
Support Me
Youtube - WalterNascimentoBarroso
Github - WalterNascimentoBarroso
Codepen - WalterNascimentoBarroso
Linkedin - WalterNascimentoBarroso
Top comments (6)
Better would be to use the built-in
<datalist>
element which does the same thing, and has better functionality and accessbilityYes if you don't require anything else other than autocomplete. is essentially useless once you need to style it or do anything that's even the least bit custom.
Hi, thanks for the comment.
I know the element but I couldn't style it (CSS) and I had a task where I needed to style the autocomplete, so my base solution was like this, this way it's easy to apply styles.
I agree with all of the comments. If it is necessary to add som style or even icons or title and descriptions , the native datalist doesn't support styling and not select boxes with options either.
Walter's solution is quite simple, but you can style it as you wish.
Good job!
thanks for the comment.
Hi, thanks for the comment.
I've used
<datalist>
in some other projects, but I ended up needing to style the<datalist>
and in a quick search I couldn't figure out how to do it and I ended up creating this solution, but if you have an article that explains how to do it, I really appreciate if you share, so the next time I need it I'll have a better solution.thanks ;)