Autocompletar un formulario con PHP, Javascript y MySQL

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() {

}