Autocomplete, que forma parte de la librería jQuery UI, es uno de los muchos plugins de autocompletado disponibles para jQuery; plugins que permiten mostrar una serie de sugerencias al usuario mientras este está escribiendo en una caja de texto. Esta funcionalidad, además de ahorrar algo de tiempo al usuario, también es un sistema mucho menos propenso a errores. Este es el aspecto de una caja de texto decorada con este plugin:
Su uso es bastante sencillo: sólo tenemos que incluir el código de jQuery y Autocomplete en nuestro documento HTML, y, opcionalmentev, su hoja de estilo; seleccionar el elemento al que añadir la funcionalidad de autocompletado, pasando un selector a la función $ / jQuery, y llamar al método autocomplete de este elemento, pasando como parámetro un objeto con un campo source, que es el que indicará al plugin la fuente de datos a utilizar para el autocompletado.
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
var animales = ["Ardilla roja", "Gato", "Gorila occidental",
"León", "Oso pardo", "Perro", "Tigre de Bengala"];
$("#animal").autocomplete({
source: animales
});
});
</script>
</head>
<body>
<input type="text" id="animal"/>
</body>
</html>
La fuente, además de un array de strings, como en el ejemplo anterior, también puede ser
- un array de objetos, con propiedades
label(el texto que se mostrará como sugerencia) yvalue(el texto que se introducirá en la caja de texto al hacer clic sobre esa sugerencia)<html> <head> <link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> $(function() { var animales = [ {label: "Ardilla roja", value: "Sciurus vulgaris"}, {label: "Gato", value: "Felis silvestris catus"}, {label: "Gorila occidental", value: "Gorilla gorilla"}, {label: "León", value: "Panthera leo"}, {label: "Oso pardo", value: "Ursus arctos"}, {label: "Perro", value: "Canis lupus familiaris"}, {label: "Tigre de Bengala", value: "Panthera tigris tigris"}]; $("#animal").autocomplete({ source: animales }); }); </script> </head> <body> <input type="text" id="animal"/> </body> </html> - una cadena con una URL, que deberá devolver un array de strings u objetos en formato JSON
<?php if(isset($_GET['getAnimales'])) { $bd = new mysqli("localhost", "root", "", "animales"); if(mysqli_connect_errno()) return; $animales = array(); if($res = $bd->query("SELECT * FROM animales")) while($animal = $res->fetch_assoc()) $animales[] = array( 'label' => $animal['nombreComun'], 'value' => $animal['nombreCientifico'], 'estado' => $animal['conservacion'], ); $bd->close(); echo json_encode($animales); return; } ?> <html> <head> <link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript"> $(function() { $("#animal").autocomplete({ source: "animales.php?getAnimales=1" }); }); </script> </head> <body> <input type="text" id="animal"/> </body> </html> - o una función de callback, a la que se le pasa un objeto
request(la petición) y un objetoresponse(la respuesta).
De entre los eventos de los que dispone el widget el que más utilizaremos, seguramente, sea select, un evento que se lanza cuando el usuario ha seleccionado uno de los resultados sugeridos, y que se utilizaría de la siguiente forma:
<?php
if(isset($_GET['getAnimales'])) {
$bd = new mysqli("localhost", "root", "", "animales");
if(mysqli_connect_errno()) return;
$animales = array();
if($res = $bd->query("SELECT * FROM animales"))
while($animal = $res->fetch_assoc())
$animales[] = array(
'label' => $animal['nombreComun'],
'value' => $animal['nombreCientifico'],
'estado' => $animal['conservacion'],
);
$bd->close();
echo json_encode($animales);
return;
}
?>
<html>
<head>
<link rel="stylesheet" href="jquery-ui-1.8.2.custom.css" type="text/css" media="all"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#animal").autocomplete({
source: "animales.php?getAnimales=1",
select: function(event, ui) {
$('#conservacion').html(ui.item.label + " (" + ui.item.value + ") " +
"tiene un estado de conservación de: " + ui.item.estado);
}
});
});
</script>
</head>
<body>
<input type="text" id="animal"/>
<p id="conservacion"></p>
</body>
</html>
Muy bueno
asd
Me gustan este tipo de entradas, a pesar de que ya conocía la funcionalidad, es lindo ver cosas de jQuery y Php.
Llegara el día que veamos el jQuery Para Todos?.-
Si hay tiempo, ganas, y a la gente le interesa, es posible 🙂
Yo sin dudas lo bajaría, imprimiría y encuadernaría como el de Python :’).-
Yo haría lo mismo que tú. Muchas gracias por el material de este post, en lo personal lo hice con los consejos de un libro que me baje por ahí, pero enserio que es muy complejo, aunque vale la pena para aprenderte algunas cosas. Gracias otra vez.
Muy buen aporte, podrias dejar la fuente para descargarselo
Listo amigo ya solucione desde la pagina principal de http://jqueryui.com/ me descargue los temas que necesitaba y el pluguin de jquery adecuado, un millon
Gran aporte 😀 hace poco comence a utilizar jQuery pero no sabia de esta util herramienta, gracias.
Una pregunta!, esta nueva funcion de jquery acepta peticiones por el metodo post??? si existe por favor diganmde necesito su ayuda
Sí, puedes pasarle una función a source y ahí usar $.post
rapido, senllito y facil de entender….
buen codigo para jquery.
saludos
Excelente post! , sencillo y concreto, habra algun tutorial de manejo de prototype¡??
o mejor aun.. esta funicionalidad de auto_complete de jquery dentro del framework cakephp?
Hola como te va
Vos sabes que me funciona bien el archivo php pero el script no me autocompleta. Por casualidad no me podrías enviar el codigo en un zip por favor.
Mil gracias,
Cristian
Yo agregaría:
$.post(
«/obtenerParecidos»,
{q: $(«#txt_busca»).val()},
function(obj){
$(«#txt_busca»).autocomplete( source: obj);
}
);
Código dentro de una función que se active al cambiar el texto de «txt_busca».
Omar:
Vos sabes que probe tu codigo y no me funciona, me asegure que el codigo jquery no de errores y que el archivo que esta dentro del directirio «obtenerParecidos» (index.php) devuleva datos y que esta siendo llamado cada vez que tecleo en la caja, pero no me aparece el autocomplete ¿No tendras el ejemplo completo para poder descargarlo por favor?
gracias
es interesante. Bueno quisiera consultarte como hago para mostrar un scroll dentro de ese autocomplete yo lo hice casi similar. Aqui te dejo el codigo hice, ademas estoy usando codeigniter. gracias
jQuery.ajax({
type: «GET»,
url: «index.php/gestionmiembro/invitador/»,
success : function(data) {
jQuery(«#invitador»).autocomplete({source:data.split(«\n»)});
}
});
hola no me funciona bien el autocomplete cuando lo recupero de una ruta externa. cuando digito alguna letra en la caja de texto siempre me muestra todos los resultados sin ser cambiado
En este momento estoy tratando de usar el autocomplete de JQuery para un campo cuyos datos deben venir de una BD, ya probe el ejemplo con valores fijos (de un array en JS) y me funciona sin problema, más al hacerlo con datos remotos de la una BD no me funciona, ya revise el modelo y la consulta se está ejecutando y trayendo los datos sin problema en formato JSON, este es mi código JS:
$(function() {
$( «#autocompletarCiudad» ).autocomplete({
source: ‘?controlador=FormularioClientesCuentasCorrientes& accion=listarCiudadesAutocompletar’,
minLength: 1
});
});
y estos son los datos que me retorna el modelo (una vez les he aplicado json_encode ):
[{«label»:»5″,»value»:»Buenaventura»},{«label»:»9″, «value»:»Caicedonia»},{«label»:»8″,»value»:»Popaya n»}]
No me está retornando errores y de hecho la petición GET se está haciendo, más no se autocompleta el campo, por lo cual les pido que si alguno de ustedes nota el error ó inconsistencia en el código me dé sus comentarios, ya que he revisado bastante esto y no doy con la respuesta.
De antemano mucha gracias por su ayuda.
Que impresionante que es jQuery
Interesante,buen post.
Gracias maestro, muy bien esplicado.
Buenos días,
Estoy teniendo problemas a la hora de personalizar comportamientos del autocomplete.Tengo un autocompletado categorizado por fabricantes, subgrupos y productos.
Cuando selecciono un fabricante modifico la url del source perfectamente, pero hasta que el usuario teclea algo no se lleva a cabo esa actualización. Sería posible hacerlo manualmente en la función Select?
muchas gracias
buenisimo el aporte,bastante claro
Como hago para dejar un elemento de la lista preestablecido?
Tengo que bajar algun archivo para hacerlo funcionar?
Buenas. Gracias por el aporte, pero me gustaría consultar una duda. El autocompletado busca sin respetar la posición de la letra del input, esto es, que poniendo «ca» sugeriría «casa» y «butaca», cuando sólo debería devolver «casa» si respetara la posición. ¿Alguna sugerencia de cómo hacerlo? He mirado en las opciones del autocomplete en la web de jquery, pero no encuentro nada por el estilo.
Saludos.-
En
https://github.com/gtryonp/tryonline
hay un autocomplete que usa una interfase de una linea. Practico para interfases minimalistas.
Hola, me interesa hacerlo pero obteniendo los datos de una base de datos, alguna ayuda?