0
Good morning, I edited a code for a search box, but I want to hide the options that appear in it. In this case, I want it to appear only when the search is matched with the exact references. No programming manjo, this code I edited based on other references. Can anyone give a help? Thanks!
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FORMATAÇÃO DA PÁGINA -->
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 3px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
#myInput {
border-box: box-sizing;
background-repeat: no-repeat;
background-image: none;
font-size: 10px;
font-family: Arial;
padding: 10px 10px 10px 10px;
border: none;
border-bottom: 1px solid #ddd;
}
#myInput:focus {outline: 10px solid #ddd;}
.dropdown {
position: relative;
display: inline-block;
}
#myDropdown {
margin-left: 0px;
margin-top: -30px;
}
button {
background: none;
border: none;
margin-left: 90px;
}
.dropdown-content { /* Caixa das opções de lojas */
display: none;
position: absolute;
background-color: #ffffff;
max-width: 80px;
overflow: hidden; border: 1px solid #ddd;
}
.dropdown-content a { /* Opções de lojas */
color: black;
padding: 5px 5px;
color: black;
font-size: 12px;
font-family: Arial;
margin-left: 10px;
text-decoration: none;
display: block;
}
.dropdown a: hover {background-color: #ddd}
.show {display:block;}
</style>
</head>
<body bgcolor="747474">
<!-- BOTÃO PESQUISA -->
<button onclick="myFunction()" id="testbtn"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAALhSURBVGhD7dlJqE5hHMfx1ywWhosFSmFBGe5WmXYiRKaIhSIbSddQQpIhKwlZSWYyr6XIksiQKZayIEmRefj+yql//851T+/zPMd79P7qs7jd7vM//zM853nOrTXTTGNmFNbhMp7hA3798Qa3cRhL0QcNlS5YhFvIDrqIzziFsfjnmYB7yDvQon5CV6kFpacTtuI78g7O0pnXweb9znqJiSgtXXEceQfzDdewGuMwEEo3DMEU7MET5P29mp6P5NGVOAl/ADrjpzESRTMLj+DH0lWejaTZAl9Ys9FU1BNNFDvgb72P0BVNEj3Y/pl4jOEIzUJ8gR+7B6JGZ87PTq8Ro4ksK2DHl82ImsWwBXQr1Hs7/S2HYOu8Q19Ei3/Z6cFOkX54C1tLK4UoGQ078FeMQKqsh613H1HiB76KlBkEP6kMRXCuwA6ql13q3IStuQTBeQ476Bikjt4ttuZOBOcT7KBlLO5WwdY8hqBoSWIH1FqojMyBrXsJwbED6iHUyzF1FsDW1fouOHop2UEHI3XWwtbci+DchR20jD3DAdiaGxCcI7CD7kLqvICtOQnBWQY7qPYQKaM9vK2nDxjdEZz+0GxlB5+BVNFUa2tdRLScgR38ATojdsbjB2ytqKvsVvhd3DbETC/cga2hn6PnKGwRNTYPMaIX71nY8XVltCuNngF4BVtMz85yhERXwjch+5Esk+H31qJ5v56dnJ4JfztlzkOfkZJFS+q8D3P6mtKGIotKraB1q/oH20vezFz4VXFGTV7HdqzETOhZWoN98NuCjlxA0mY0kz1FXvHY1EyUl2J76Ql9tHuPvAMoQs/INPidqJe8GUVfPzbiIfIOwtNsdw7ToalX0UE2RDNZhkHrs904AW2KtDI4iE3Qm7o38lKkGS1ZSmsmJEWa0clpNlN2ijSj/1X+N83o981myk5HzdyAFp+VSHvNVKqJLL6ZSjaRJWum0k1kUTOVb6KZCqZW+w1w1tdLnXK2BgAAAABJRU5ErkJggg==" max-width="20px" width="20px"></button>
<!-- CAIXA DE PESQUISA -->
<div id="myDropdown" class="dropdown-content">
<!-- CAMPOS LOJAS -->
<input type="text" placeholder="Pesquisar" id="myInput" onkeyup="filterFunction()">
<!-- SAO PAULO -->
<a href=" ">457</a>
<a href=" ">291</a>
<a href=" ">441</a>
</div>
<!-- SCRIPT DE PESQUISA -->
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
div = document.getElementById("myDropdown");
a = div.getElementsByTagName('a');
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = '';
} else {
a[i].style.display = 'none';
}
}
}
</script>
</body>
</html>
doing it in hand is a little complicated saw, has a lib called Selectize Take a look, she’ll help you with that.
– Lodi
Great, my friend! I can’t use external libraries, the code will run offline in a closed supervisory system. That’s why I left the css and javascript inside the same.
– Gabriel Mendez
You can download it and leave it offline, it’s not a problem that!
– Lodi