En esta práctica de generar un JSON desde PHP vamos a aprender a trabajar de manera avanzada con un campo de autocompletado de texto. Es uno de esos campos de texto que habréis visto en muchas webs de programación avanzada, que sugieren diversas posibilidades según se escribe texto en el campo, para que el visitante no tenga que escribir un texto completo.

Realmente ya explicamos qué es un campo de tipo autocompletar y cómo generarlo fácilmente utilizando las librerías jQuery UI.
Además, vimos también en otro artículo cómo utilizar un script remoto para generar las sugerencias de autocompletado.

En el presente texto iremos un paso más adelante, mostrando una posibilidad de creación del archivo en notación JSON que debemos devolverle al campo de autocompletar, extrayendo las distintas posibilidades a través de una base de datos MySQL. En el artículo enfrentaremos este problema en dos pasos. En el primero mostraremos cómo generar un JSON a partir de un array de objetos y luego veremos cómo poblar ese array a través de una consulta con la base de datos.

No obstante, antes de comenzar, podemos ver cómo es el campo autocompletar que vamos a construir.

Código PHP para generar un JSON para autocompletar

Como primer paso en este artículo vamos a ver cómo generar un JSON a partir de un array de objetos. Este JSON tendrá siempre los mismos valores, es decir, es sólo una prueba para intentar generar el JSON con el formato que requiere el plugin autocomplete de jQuery UI. Más adelante mostraremos cómo generarlo a través de una búsqueda en una base de datos.

Para obtener nuestros objetivos vamos a crear primero una clase y luego generar un array de objetos de esa clase, que luego convertiremos a JSON con las funciones nativas de PHP.

//defino una clase para los elementos del campo autocompletar
class ElementoAutocompletar {
   //propiedades de los elementos
   var $value;
   var $label;
   
   //constructor que recibe los datos para inicializar los elementos
   function __construct($label, $value){
      $this->label = $label;
      $this->value = $value;
   }
}

//defino un array con varios elementos objetos de la clase anterior
$ArrayElementos = array(
   new   ElementoAutocompletar("Elemento 1", "valor 1"),
   new   ElementoAutocompletar("Elemento 2", "valor 2"),
   new   ElementoAutocompletar("La vida dura", "Es la vida"),
   new   ElementoAutocompletar("Elemento Lo que sea", "otro valor cualquiera")
);

//imprimo en la página la conversión a JSON del array anterior
print_r(json_encode($ArrayElementos));

Al ejecutar este código PHP obtendremos el JSON con el formato que está esperando el plugin autocomplete de jQuery UI.

Generar los elementos del JSON a partir de una búsqueda en una tabla MySQL

Ahora veremos un paso más relacionado con el propio acceso a la base de datos que con la dificultad de trabajar con JSON. Es decir, si hemos entendido la anterior generación del JSON, en este paso sólo le agregaremos la dificultad de trabajo con la base de datos MySQL.

En nuestro caso vamos a buscar dentro de una tabla que contiene entradas de la wiki de desarrollo de páginas web.

Además, tenemos que saber que a este script PHP se le llamará desde jQuery y recibirá por GET el texto que se haya escrito en el campo de autocompletado, a través de la variable $_GET["term"].

//defino una clase que voy a utilizar para generar los elementos sugeridos en autocompletar
class ElementoAutocompletar {
   var $value;
   var $label;
   
   function __construct($label, $value){
      $this->label = $label;
      $this->value = $value;
   }
}

//recibo el dato que deseo buscar sugerencias
$datoBuscar = $_GET["term"];

//conecto con una base de datos
$conexion = mysql_connect("localhost", "root", "");
mysql_select_db("mibasededatos");

//busco un valor aproximado al dato escrito
$ssql = "select id_entrada, nombre_entrada from entrada where nombre_entrada like '%" . $datoBuscar . "%'";
$rs = mysql_query($ssql);

//creo el array de los elementos sugeridos
$arrayElementos = array();

//bucle para meter todas las sugerencias de autocompletar en el array
while ($fila = mysql_fetch_array($rs)){
   array_push($arrayElementos, new ElementoAutocompletar(utf8_encode($fila["nombre_entrada"]), $fila["id_entrada"]));
}

print_r(json_encode($arrayElementos));

El código anterior está comentado, por lo que estamos seguros que se podrá entender bien. No obstante, quiero llamar la atención para un tema importante.

La notación JSON requiere que los textos que se escriban estén en UNICODE y la propia función json_encode() de PHP hace esa conversión a UNICODE por nosotros. Pero eso sí, nosotros tenemos que asegurarnos que los textos que insertemos en aquello que queremos convertir a JSON estén en UTF-8. Este asunto fue explicado con más detalle en el artículo Producir JSON desde PHP.

Por ello, al hacer el objeto de la clase ElementoAutocompletar, el nombre de la entrada, que podría tener acentos y otros caracteres especiales que se deban escapar, se convierte a UTF-8:

utf8_encode($fila["nombre_entrada"])

Con todo esto ya hemos visto cómo generar un JSON para consumir desde el plugin autocomplete de jQuery UI. Estoy seguro que con muy poco esfuerzo cualquier persona podrá adaptar ese código para hacer su propio campo de autocompletar, trayendo los datos de cualquier entidad de su base de datos.