Es muy común hoy en día encontrarnos con formularios que deben completarse mediante alguna opción pre-existente en el sistema.
Si las opciones son pocas, lo más usual es utilizar un dropdown (un objeto basado en el tag select de HTML), pero si la cantidad de opciones es grande, esto puede volverse un fastidio para el usuario.
Una forma mejor es dejar que el usuario ingrese el texto que quiera y dejar que el sistema autocomplete el resto.
Para lograr este efecto se requiere una combinación de factores:
- Un servicio que pueda tomar el texto introducido por el usuario y devuelva una lista de opciones disponibles que coincidan.
- Una página capaz de tomar la entrada del usuario, interactuar con el servicio y presentar las opciones al usuario.
Un servicio que busque opciones que coincidan con el texto que ingresó el usuario
Vamos a comenzar por diseñar un script php que resuelva esta parte del problema:
<?php
$options = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
if ( $term = $_GET['term'] ?? '' ) {
$matches = array_filter( $options, function( $option ) use ( $term ) {
return strpos( strtolower($option), $term ) !== false;
} );
header( 'Content-Type: text/javascript' );
echo json_encode( array_values($matches) );
}
A este pequeño script le llamaremos get_matches.php.
Un formulario que use el autocomplete
La segunda parte de la solución es un formulario capaz de tomar la entrada del usuario, enviársela al servicio y actuar según la respuesta recibida.
Se verá de este modo:
<html>
<body>
<form>
<p><label for="language">Language</label><input type="text" name="language" id="language"/></p>
<p><select id="multiple" style="display: none;" size="10"/></p>
</form>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$( "#language" ).on( 'input', function() {
$('#multiple').hide();
$.ajax(
{
url: 'get_matches.php?term=' + $(this).val(),
success: function( data ) {
if ( data.length == 1 ) {
$('#language').val( data[0] );
} else {
if ( data.length > 1 ) {
$("#multiple").find('option').remove();
data.forEach( function(e) {
$("#multiple").append("<option>" + e + "</option>");
});
$("#multiple").prop( 'size', data.length );
$("#multiple").show();
}
}
},
dataType: 'json',
}
);
}
);
$( "#multiple" ).click( function() {
$('#language').val( $(this).val() );
$('#multiple').hide();
}
);
</script>
</html>
Para verlo todo funcionando basta con iniciar el servidor incorporado a PHP:
php -S localhost:8000
Y abrir un navegador en localhost:8000 para ver:
Y luego, a medida que vayamos escribiendo veremos aparecer opciones:
Y cuando hayamos escrito una opción que acota la lista a un solo candidato automáticamente se llenará el campo.
Algunas notas
Habrás notado que, en realidad, la magia se hace del lado del frontend (¡Mucho javascipt!).
Lo que se podría (y probablemente debería!) modificarse es el modo de conseguir las opciones desde PHP.
En este ejemplo usamos un arreglo estático, pero en un caso más real lo haríamos a través de alguna consulta a una base de datos, algo como:
SELECT name FROM languages WHERE name LIKE '%TERM%';
Reemplazando TERM por lo que haya ingresado el usuario.
Esto funcionará bien mientras la tabla sobre la que queramos buscar no sea extremadamente grande (Unos pocos miles de registros debería soportar sin mucho problema)… si la base es más grande o queremos hacer búsquedas menos exactas deberemos utilizar alguna otra herramienta como Solr, Sphinx o ElasticSearch.
Hola, implemente todo tal cual pero cuando ejecuta la llamada da un 404 al no encontrar el archivo get_matches.php. Tendre que revisar algun config de xampp? Gracias!
Hola Maggie!
Habría que chequear algunas cosas… para comenzar, ¿el archivo existe? Es decir, ¿creaste un archivo con ese nombre y el contenido que figura en el artículo?
Algo más que es importante es que el archivo se encuentre en el directorio raíz del servidor web.
Saludos!
Muchas gracias, muy buen ejemplo!!
Gracias! Me alegra que te ayude 🙂