En un artículo anterior describíamos cómo utilizar el plugin Autocomplete de jQuery para implementar un campo de texto con sugerencias. En esta ocasión usaremos el plugín (también de jQuery) FlexBox.  Este plugin puede ser usado como combobox o textbox con autocompletado. Además, puede paginar la lista de resultados y definir un template HTML para mostrar cada ítem de la lista.

Las instrucciones para descargar e instalarlo se encuentran aquí. Una vez descargados todos los archivos, se debe incluir el css y js para poder utilizarlos (recordar incluir también jquery):

<script src="ruta/a/jquery.flexbox.min.js" type="text/javascript">

<link type="text/css" rel="stylesheet" href="ruta/a/jquery.flexbox.css" mce_href="path/to/jquery.flexbox.css" />

Veamos un ejemplo:

Tenemos que crear un DIV, el cual va a ser convertido en el cuadro de texto con autocompletar:

<div id="fb"></div>

Luego, insertamos el código JavaScript:

$(document).ready(function () {
$('#fb').flexbox('resultados.php', {
watermark: 'Seleccione una elemento',
noResultsText: 'No hay resultados',
method : 'POST',
paging: {
pageSize: 15
}

});
});

El script resultados.php debe retornar un string JSON, con el siguiente formato:

{"results":[
{"id":1,"name":"Hormiga"},
{"id":2,"name":"Oso"},
{...} // los demás resultados aquí
]}

El “id” es un entero o un string identificando al elemento y es el valor que es enviado cuando el formulario el enviado.
El “name”  es un entero o un string que es mostrado para cada elemento.

En el siguiente post mostraremos algunas otras opciones que brinda este plugin.

Guardado en : Iugo por admin