Generar un JSON desde PHP para un campo autocomplete de jQuery UI

  • Por
Cómo generar una respuesta en notación JSON para definir las sugerencias para autocompletar, extraídas de una base de datos MySQL, que se envían al plugin autocomplete de jQuery UI.
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.

Nota: el inicio de esta práctica, con toda la parte de generación de este componente web con jQuery UI se puede ver en el artículo Campo de autocompletado en jQuery UI con carga remota de opciones.

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"])

Nota: el campo id_entrada, $fila["id_entrada"], no lo convertimos porque sólo va a contener números enteros y por ello no hace falta pasarlo a UTF-8.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

mario

19/12/2011
consulta autocomplete
Quería saber si hay forma de que al seleccionar un elemento aparezca en el campo de búsqueda la descripción en lugar del código.
Gracias

http://www.desarrolloweb.com/articulos/ejemplos/jquery/ui/autocomplete/probando-autocomplete-remoto.html

Luis

27/3/2012
Ñ y Acentos al buscar en el autocomplete
Tengo el problema de que cuando escribo y ponogo un ñ o voc al con acentos se corta la conuslta lo debugue con el fireDebug de firefox y me muestra %c3%b1 pero el cotjamiento de l pagina que hace la busuqeda osea el index.html es utf-8 no se cual sea el porblema
pedo mi codigo

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
function split( val ) {
return val.split( /,s*/ );
}
function extractLast( term ) {
return split( term ).pop();
alert(term);
}
$( "#birds" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if (term.keyCode = 164){
term.replace('ñ','n')
}else if ( term.length < 2 ) {
return false;
}
},
});
});
</script>

</head>
<body>
<div class="demo">
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="50" />
</div>
</div><!-- End demo -->
</body>
</html>

LearningTools

08/5/2013
vengo desde art plugin autocompletar en jquer UI
bueno amigos llegue hasta aqui por medio de el manual de json, bueno mi pregunta es esta con respecto ala linea

$arrayElementos = array();

que se debe colocar exaptamente hay pense que conla consultta ala bd seria suficiente, me podrian ayudar a despejar la duda, un saludo que esten bien;

Julio Chirinos

28/1/2015
Respecto a la explicación
Creo que debo felicitarte por el estupendo trabajo que haces. Me parece que la explicación es lo suficientemente detallada para que cualquier persona lo entienda. Precisamente pienso que esa es la clave...Sigue con el trabajo!

antispam

08/2/2015
hay una demo en algun sitio?
Muchas gracias, he leido varios articulos de este blog y me parecen muy buenos para aficionados no profesionales como yo, se aprende mucho.

Esta guia sobre autocompletado, me viene muy bien para un blog sobre musica, para encontrar rapidamente los nombres de grupos y musicos.

Hay una demostracion en algun sitio? queda estetico la forma de completar las palabras? se ha solucionado el problema de las tildes y las eÑes?

muchas gracias

omar

31/7/2016
duda de rendimiento
Disculpa me surge la siguiente duda. Suponiendo que tengo un listado de 1000 opciones o palabras, ¿Cual es la forma mas optima de programarlo, ocupando un archivo php con un arreglo de las 1000 opciones o usando la conexión a una bd en la cual tenga una tabla con las 1000 opciones?
Te antemano agradezco la respuesta y te felicito por la claridad con la que explicas los temas. Saludos

jose

17/1/2017
ocultar
Hola, muy buen articulo. Tengo un problema al utilizarlo. Cuando escribo y por algun motivo elimino todo lo escrito me aparece todo el listado y no tengo forma de que se oculte. Que habria que hacer para que se oculte?
Gracias