Mr_J21
Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Me gustaría moverme en la lista con el teclado y seleccionar con un enter.
También que siguiera autocompletando, este código solo autocompleta una única vez. (El código está debajo)
También que siguiera autocompletando, este código solo autocompleta una única vez. (El código está debajo)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
margin: 0;
padding: 5px;
background-color: gray;
width: 150px;
color: white;
}
</style>
</head>
<body>
<input type="text" onkeyup="getValue(this.value)">
<div class="output"></div>
<script>
var result = document.querySelector(".output");
var Arr = ["India", "USA", "China", "Netherlands", "Nepal", "Japan", "Australia"];
// auto complete function
function autoComplete(Arr, Input) {
return Arr.filter((e) => e.toLowerCase().includes(Input.toLowerCase()));
}
function getValue(val) {
// if no value
if (!val) {
result.innerHTML = "";
return;
}
// search goes here
var data = autoComplete(Arr, val);
// append list data
var res = "<ul>";
data.forEach((e) => {
res += "<li>" + e + "</li>";
});
res += "</ul>";
result.innerHTML = res;
}
</script>
</body>
</html>
Última edición: