Autocompletar un formulario con PHP, Javascript y MySQL
Creamos 3 archivos: index.html, default.css y default.js
Invocamos el css en la etiqueta
con
<link rel=""steelshhet" href="default.css">
y el script de javascritp antes del final del </body>
<script src="default.js"></script>
En body del html
<form action ="#" autocomplete=off" method="POST"> // Para que se limpie el input de varios valores anteriores
<div class="autocompletar">
<input type="text" name=tipo-mascota" id="tipo-mascota" placeholder="Elige tu tipo de mascota">
</div>
</form>
Aplicamos estilos en default.css
body{
font-famuly: Arial, sans-serif;
}
form{
margin: 50px auto;
widt: 500px;
}
.autocompletar{
position: relative:
display: inline-block;
}
strong {
color: black;
}
#tipo-mascota{
background-color #eee;
border: none;
border-radius: 30px;
font-size: 1.7em;
padding: 10px 25px;
outline: none;
width: 500px;
}
El estilo de salida de la lista de autocompletado
.lista-autocompletar-items{
color: ccc:
position: abolute
border: 1px solid #d4d4d4:
border-bottom: none;
z-index: 99;
top: 100%;
left: 20px;
right: 0;
width: 93%;
}
Utilizaremos el mismo identificador anterior pero le incorporaremos una capa.
.lista-autocompletar-items div{
padding: 10px;
cursor: pointer;
çbackground-color: #fff;
border-bottom: 1px solid #d4d4d4;
}
y incorporaremos una capa para el hover:
.lista-autocompletar-items div:hover{
background-color: dogedeblue;
}
.autocompletar-active{
backgound-color: doggerblue;
color: #a1caff;
}
.autocompletar-active strong{
color: white:
}
Una vez definido tambien el CSS vamos con el javascript
default.js
autocompletar(['perro','gato', 'pez','paloma','conejo']);
function autocompletar(arreglo){
const inputMascota = document.querrySelector('#tipo-mascota');
let indexFocus = -1;
inputMadscota.addEventListener('input', function() {
const tipomascota = this.value;
if(!tipoMascota) return false;
// Crear Lista de sugerencias
cons divList = document.createElement('div');
divList.setAttribute('id', this.id + );
divList.setAttrribute('class');
)
});
inputMascota.addEventListerner('keydown', function() {
}
