Cómo hacer un autocomplete con PHP

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:

  1. Un servicio que pueda tomar el texto introducido por el usuario y devuelva una lista de opciones disponibles que coincidan.
  2. 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.

mchojrin

Docente y consultor PHP at Leeway Academy
Ayudo a desarrolladores PHP a acelerar su llegada a Sr.

¿Te quedó alguna duda? Publica aca tu pregunta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

A %d blogueros les gusta esto: