1
I got a problem: the JS code it can take the value of the datalist and return through an Alert the selected item, but I need to do functions for each operation, IE, I need JS to interpret which item I selected and make the function of the corresponding item.
Example: I selected ADDITION >>> Show by an Alert the selected item and perform the sum of 2 values.
let input = document.getElementById('txt-busca');
input.addEventListener('input', function(evt) {
let selector = document.querySelector('option[value="'+this.value+'"]');
if ( selector ) {
input.setAttribute('value', selector.getAttribute('data-value'));
alert(this.value);
}
}, false);
var pesquisar = document.getElementById('btn-pesquisar');
pesquisar.addEventListener('click', function() {
location.href = "https://www.w3schools.com";
});
.busca{
left: 50%;
transform: translateX(-50%);
top: 100px;
width: 310px;
border-radius: 15px;
position: absolute;
border:solid 1px var(--cor-text);
background-color: gray;
}
.busca:hover {
transition: 1s;
border:solid 1px var(--cor-efeito);
}
#txt-busca {
height:32px;
width:260px;
font-size: 0.8rem;
padding-left: 12px;
float:left;
border:none;
font-family: 'Cardo', serif;
background-color:transparent;
color: white;
}
.busca img {
width: 25px;
height: 25px;
line-height: 32px;
padding: 2px 0 0 2px;
cursor: pointer;
}
<div class="busca">
<input type="text" id="txt-busca" placeholder="Pesquisar Conteúdo..." list="historico"/>
<button id="btn-pesquisar" style="width: 30px; height: 30px; background-color: rgba(255, 255, 255, 0); border: none;"><img src="https://img.icons8.com/fluent/48/000000/search-in-browser.png" id="btn-busca" alt="buscar" /></button>
</div>
<datalist id="historico" id="lista_conteudos" >
<option data-value="1" value="ADIÇÃO">Na adição uma quantidade é somada de outra.</option>
<option data-value="2" value="SUBTRAÇÃO">Na subtração uma quantidade é retirada de outra.</option>
</datalist>