¿Cómo hacer un campo de texto input autocompletable?
Técnica básica con HTML puro
La forma más sencilla de hacer un campo de texto input autocompletable es utilizar la etiqueta "datalist" con HTML. No necesita javascript, y es preferible porque el navegador se ha de encargar de completar y buscar entre las opciones. Ejemplo:
<label for="selección">Elige una opción de transporte:</label>
<input list="lista" name="claveDelParámetro" id="selección">
<datalist id="lista">
<option value="valorDelParámetro1">avión</option>
<option value="valorDelParámetro2">barco</option>
<option value="valorDelParámetro3">carro</option>
<option value="valorDelParámetro4">disco volador</option>
<option value="valorDelParámetro4">elefante</option>
<option value="valorDelParámetro5">caballo</option>
</datalist>
Si el usuario escribe "c" o "cab", inmediatamente verá la opción del caballo. Si lo selecciona, en los parámetros GET o POST se enviará claveDelParámetro = valorDelParámetro5.
En general, si tienes una solución HTML pura, CSS pura, o SVG pura, es preferible utilizarla a usar javascript, porque te garantiza la mayor compatibilidad, el mejor rendimiento, y sigues los estándares generales en lugar de estar reinventando cosas que ya están establecidas, lo cual en el futuro hace que tu código sea más simple y fácil de mantener, y esto último es extremadamente importante. Entre los principios más importantes de la programación está este:
Trata de hacer todo de la manera más simple posible, el mejor código
es el que no hay que escribir ni mantener.
Lo más fácil siempre sería que cargares la página desde el principio con la lista "datalist" ya renderizada y completa, no obstante, si la lista fuere demasiado grande, por tener quizás millones de opciones, entonces quizás se justificaría el hacer el complicado proceso de actualizarla dinámicamente. Ten en cuenta que incluso si escribes 1000 opciones en tu "datalist" al compilar tu HTML, no estás realmente saturando el código, porque sigue siendo muy poco texto; en verdad tendrían que ser varios miles de opciones para que fueren un problema.
Si tal fuere el caso, lo que tienes que hacer para solucionar el problema es simplemente un evento javascript que agregue elementos a la "datalist" con nueva información relacionada con lo que el usuario esté escribiendo.
Actualización dinámica de la datalist con JavaScript y API
Para actualizar dinámicamente con los datos nuevos obtenidos de un API, según vaya escribiendo el usuario, tienes que usar un código como el que tengo aquí. Lo he escrito para ejemplificar cómo se podría lograr esto. He creado una clase llamada "DynamicDatalist" para que se facilite todo, ya que lo que parece algo muy difícil es en realidad muy simple si se concibe a la datalist como un objeto que se puede actualizar con una función propia. Si no conoces la programación orientada a objetos, te recomiendo que te familiarices con ella, te hará todo muchísimo más fácil, tanto en PHP como en JavaScript. En PHP está mucho más definida y tiene muchísimos detalles (interfaces, tipificación de variables, clases abstractas, etcétera), en JavaScript es muy general aún pero de todas formas ayuda a hacer todo más fácil que con meras funciones aisladas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
class DynamicDatalist{
//función constructora (que se ejecuta automáticamente al crear el objeto): construir la datalist con Id
constructor(datalistId) {
this.objectDOM = document.getElementById(datalistId)
//check that the datalist exists, and if not create it
if(this.objectDOM !== null){
this.objectDOM = document.getElementById(datalistId)
} else {//construir un nuevo elemento DOM si no existe aún
this.objectDOM = document.createElement('datalist')
this.objectDOM.id = datalistId
}
}
//función agregar una opción a la datalist
agregar(valor, texto = null) {
if(texto === null) texto = valor
//ver si está el valor ya definido
var list = this.opciones()
if(!list.hasOwnProperty(valor)) {
// si no está definido el valor, definirlo
//crear el objeto opción
var option = document.createElement('option')
option.value = valor
option.innerHTML = texto
//adjuntar
this.objectDOM.appendChild(option)
}
}
//leer la lista de opciones
opciones() {
var output = {}
//iterar a través de las opcione
for(let option of this.objectDOM.childNodes) {
if(option.tagName == 'OPTION') output[option.value] = option.innerHTML
}
return output;
}
actualizarAPI(pista) {
//tienes que codificarlo para que pasaren lo caracteres extraños que hubiere
pista = encodeURI(pista)
//la api GET en este ejemplo
var api = 'https://ejemplo.com/buscar.php?datos=transportes&pista=' + pista
//Ahora sí puedes llamar a la api
//usa el parámetro {credentials: 'include'} para que se manden las cookies también
fetch(call, {credentials: 'include'})
//luego descodifica el JSON. Nota el punto antes de "then", eso significa que esto es una función que se ejecutará subsecuentemente. El parámetro es una función anónima, solo que en un formato abreviado, en realidad lo que ahí dice es esto:
// .then(function (response) {return response.json();})
.then(response => response.json())
//luego actualiza la lista de datos.
.then(datos => {
//Agrega la nueva información, suponiendo que te llegó como un objeto (lo que llegaría desde un array asociativo de PHP), que en javascript sería: var objeto = {clave1: 'valor1', clave2: 'valor2'};
//entonces has un pequeño bucle para agregar cada opción a la lista
//esto que lees aquí es el equivalente a un foreach($arrayAsociativo as $clave => $valor) en php
//para "clave" como cada key en el objeto "datos"
for (let clave in datos)
{
//si el objeto "datos" tiene la propiedad "clave" entonces...
//Esto se tiene que hacer porque los objetos javascript tienen unas claves prototipo que están presentes siempre(y permiten que ejecutes ciertas funciones), pero que no son lo que necesitas ahora, así que solo quieres que sea una propiedad, no parte de los prototipos.
if(datos.hasOwnProperty(clave))
{
//obten el valor
var valor = datos[clave]
//agrega la opción a la lista de datos
this.agregar(clave, valor)
}
}
})
}
}
</script>
</head>
<body>
<label for="selección">Elige una opción de transporte:</label>
<input list="lista" name="claveDelParámetro" id="selección" oninput="listaDD.actualizarAPI(this.value)">
<datalist id="lista">
<option value="valorDelParámetro1">avión</option>
<option value="valorDelParámetro2">barco</option>
<option value="valorDelParámetro3">carro</option>
</datalist>
<script type="text/javascript">
var listaDD = new DynamicDatalist('lista')
</script>
</body>
</html>
He preparado una versión simulada, para que veas cómo funciona. Nota que el HTML original solo tiene las opciones avión, barco, carro; pero que al ejecutar esto se manda la petición y se actualiza la datalist.
<script type="text/javascript">
class DynamicDatalist{
//construir la datalist con Id
constructor(datalistId) {
this.objectDOM = document.getElementById(datalistId)
//check that the datalist exists, and if not create it
if(this.objectDOM !== null){
this.objectDOM = document.getElementById(datalistId)
} else {//construir un nuevo elemento DOM si no existe aún
this.objectDOM = document.createElement('datalist')
this.objectDOM.id = datalistId
}
}
//agregar una opción a la datalist
agregar(valor, texto = null) {
if(texto === null) texto = valor
//ver si está el valor ya definido
var list = this.opciones()
if(!list.hasOwnProperty(valor)) {
// si no está definido el valor, definirlo
//crear el objeto opción
var option = document.createElement('option')
option.value = valor
option.innerHTML = texto
//adjuntar
this.objectDOM.appendChild(option)
}
}
//leer la lista de opciones
opciones() {
var output = {}
//iterar a través de las opcione
for(let option of this.objectDOM.childNodes) {
if(option.tagName == 'OPTION') output[option.value] = option.innerHTML
}
return output;
}
actualizarAPI(pista) {
//tienes que codificarlo para que pasaren lo caracteres extraños que hubiere
pista = encodeURI(pista)
//la api GET en este ejemplo
var api = 'https://ejemplo.com/buscar.php?datos=transportes&pista=' + pista
//Ahora sí puedes llamar a la api
//usa el parámetro {credentials: 'include'} para que se manden las cookies también
//desetiqueta esto:
// fetch(call, {credentials: 'include'})
//vamos a simular el fetch:
//borra esto:
const simulador = new Promise((resolve) => {
var respuesta = {claveSimulada: 'valorSimulado'}
respuesta['opciónDescargada4'] = 'disco volador'
respuesta['opciónDescargada5'] = 'elefante'
respuesta['opciónDescargada6'] = 'caballo'
resolve(respuesta)
})
//luego descodifica el JSON. Nota el punto antes de "then", eso significa que esto es una función que se ejecutará subsecuentemente. El parámetro es una función anónima, solo que en un formato abreviado, en realidad lo que ahí dice es esto:
// .then(function (response) {return response.json();})
//desetiqueta esto:
// .then(response => response.json())
//luego actualiza la lista de datos.
.then(datos => {
//Agrega la nueva información, suponiendo que te llegó como un objeto (lo que llegaría desde un array asociativo de PHP), que en javascript sería: var objeto = {clave1: 'valor1', clave2: 'valor2'};
//entonces has un pequeño bucle para agregar cada opción a la lista
//esto que lees aquí es el equivalente a un foreach($arrayAsociativo as $clave => $valor) en php
//para "clave" como cada key en el objeto "datos"
for (let clave in datos)
{
//si el objeto "datos" tiene la propiedad "clave" entonces...
//Esto se tiene que hacer porque los objetos javascript tienen unas claves prototipo que están presentes siempre(y permiten que ejecutes ciertas funciones), pero que no son lo que necesitas ahora, así que solo quieres que sea una propiedad, no parte de los prototipos.
if(datos.hasOwnProperty(clave))
{
//obten el valor
var valor = datos[clave]
//agrega la opción a la lista de datos
this.agregar(clave, valor)
}
}
})
}
}
</script>
<label for="selección">Elige una opción de transporte:</label>
<input list="lista" name="claveDelParámetro" id="selección" oninput="listaDD.actualizarAPI(this.value)">
<datalist id="lista">
<option value="valorDelParámetro1">avión</option>
<option value="valorDelParámetro2">barco</option>
<option value="valorDelParámetro3">carro</option>
</datalist>
<script type="text/javascript">
var listaDD = new DynamicDatalist('lista')
</script>
keyup
okeydown
en el inputsuggest
, soy una trucha, jajajajaja