Autocompletar campo con jQuery, Ajax y PHP
Amplia tu conocimiento y obtén un código de ejemplo que te permite autocompletar un campo de texto con jQuery, Ajax y PHP.
En el ejemplo en funcionamiento vamos a tener un campo de texto que al escribir en él aparecen sugerencias (en el caso de que existan) para auto completar su valor. Para el aspecto del mismo nos vamos a apoyar en la tecnología Bootstrap 4.
Partiremos de un formulario simple en el cual tenemos un campo de texto (input) en el que aparecerán sugerencias a medida que se va escribiendo.
<form class="form-inline" method="post" action="#">
<div class="input-group input-group-sm">
<input class="search_query form-control" type="text" name="key" id="key" placeholder="Buscar...">
<span class="input-group-btn">
<button type="submit" class="btn btn-info btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
<div id="suggestions"></div>De este formulario, tenemos que prestar especial atención al id del input y al contenedor donde depositaremos mediante jQuery las sugerencias.
En la cabecera o dentro de la etiqueta <head> o en una hoja de estilos podemos agregar el código CSS específico que estamos usando para las sugerencias:
#suggestions {
box-shadow: 2px 2px 8px 0 rgba(0,0,0,.2);
height: auto;
position: absolute;
top: 45px;
z-index: 9999;
width: 206px;
}
#suggestions .suggest-element {
background-color: #EEEEEE;
border-top: 1px solid #d6d4d4;
cursor: pointer;
padding: 8px;
width: 100%;
float: left;
}También en la cabecera o dentro de la etiqueta <head> o incluso justo antes de la etiqueta de cierre de </body> podemos agregar lo siguiente:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
$(document).ready(function() {
$('#key').on('keyup', function() {
var key = $(this).val();
var dataString = 'key='+key;
$.ajax({
type: "POST",
url: "ajax.php",
data: dataString,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$('#suggestions').fadeIn(1000).html(data);
//Al hacer click en alguna de las sugerencias
$('.suggest-element').on('click', function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr('id');
//Editamos el valor del input con data de la sugerencia pulsada
$('#key').val($('#'+id).attr('data'));
//Hacemos desaparecer el resto de sugerencias
$('#suggestions').fadeOut(1000);
alert('Has seleccionado el '+id+' '+$('#'+id).attr('data'));
return false;
});
}
});
});
});
</script>Ahora la página estará a la espera observando que se escribe en el campo con id=»key» para mostrar sugerencias.
Utilizamos la función keyup de jQuery para capturar los eventos del teclado en este campo. Obtenemos el valor del input y se lo pasamos al archivo «ajax.php» mediante la técnica Ajax. La parte más interesante está en el success, observa los comentarios para entenderlo.
Este archivo PHP se encarga de conectar con la base de datos y generar la consulta SQL para obtener los productos que contengan parte de los caracteres introducidos en el campo de texto.
<?php
define('DB_SERVER', 'localhost');
define('DB_SERVER_USERNAME', 'YOUR DATA BASE USERNAME');
define('DB_SERVER_PASSWORD', 'YOUR DATA BASE PASSWORD');
define('DB_DATABASE', 'YOUR DATA BASE NAME');
$connexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);
$html = '';
$key = $_POST['key'];
$result = $connexion->query(
'SELECT * FROM product p
LEFT JOIN product_lang pl ON (pl.id_product = p.id_product AND pl.id_lang = 1)
WHERE active = 1
AND pl.name LIKE "%'.strip_tags($key).'%"
ORDER BY date_upd DESC LIMIT 0,5'
);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$html .= '<div><a class="suggest-element" data="'.utf8_encode($row['name']).'" id="product'.$row['id_product'].'">'.utf8_encode($row['name']).'</a></div>';
}
}
echo $html;
?>En este código PHP lo que estamos haciendo es conectar con la base de datos, recoger el texto escrito en el campo de texto y hacer la consulta para buscar la información en las tablas que queremos de la base de datos. Este archivo retorna en formato HTML la lista de productos sugeridos.
(*) Nota: Si te has descargado la demo deberás cambiar los parámetros de conexión establecidos en el archivo «ajax.php» y luego realizar la consulta según sea la base de datos que desees emplear.
En el ejemplo que estamos ilustrando jugamos con una base de datos de ejemplo en la que mostramos servicios o productos.
Autor
¿Buscas trabajo de programador?
113 respuestas a “Autocompletar campo con jQuery, Ajax y PHP”
Deja una respuesta
55 artículos que te podrían interesar
Ver más sobre
yo ya tengo el codigo funcional pero no he podido darle la faculta de bajar o subir con las teclas flechas para escojer por teclado una opcion,
he intentado con keyup en todas maneras y nada
alguien lo ha podido hacer ?
function BuscarAgenciaRutAjax() {
//var Ruta = RutaRaiz;
var Controlador = «agencia/»
var Metodo = «buscar_rut_ajax/»;
var Valor=document.getElementById(‘rut_box’).value;
var RutaCompleta=RutaRaiz+Controlador+Metodo+Valor;
if(Valor===»»){
$(‘#suggestions’).fadeOut(1000);
}else{
$.ajax({
type: «GET»,
url: RutaCompleta,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$(‘#suggestions’).fadeIn(1000).html(data);
// VEMOS LA RUTA que envia por GET
//$(«#rutas_preview»).html(RutaCompleta);
//Al hacer click en alguna de las sugerencias
$(‘.suggest-element’).on(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr(‘id’);
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#num_agencia_box’).val($(‘#’+id).attr(‘data’));
$(«#botom_buscar»).click();
//buscar_agencia_ajax(id);
//Hacemos desaparecer el resto de sugerencias
$(‘#suggestions’).fadeOut(1000);
//alert(‘Has seleccionado el ‘+id+’ ‘+$(‘#’+id).attr(‘data’));
return false;
});
}
});
$(«#rutas_preview»).html(RutaCompleta);
}
document.getElementById(«rut_box»).addEventListener(«focusout», desac_suggest);
function desac_suggest() {
$(‘#suggestions’).fadeOut(1000);
}
}
MUY BUENO ME FUNCIONO GENIAL PERO FALTA ALGO QUE DESPARASESCA LAS SUGERENCIAS
LO RESOLVI ASI
$(document).ready(function() {
$(‘#key’).on(‘keyup’, function() {
var key = $(this).val();
var dataString = ‘key=’+key;
if(key == «») {
//Hacemos desaparecer el resto de sugerencias cuando no halla nada escrito
$(‘#suggestions’).fadeOut(1000);
} else {
$.ajax({
type: «POST»,
url: «ajax.php»,
data: dataString,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$(‘#suggestions’).fadeIn(1000).html(data);
//Al hacer click en alguna de las sugerencias
$(‘.suggest-element’).on(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr(‘id’);
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#key’).val($(‘#’+id).attr(‘data’));
//Hacemos desaparecer el resto de sugerencias
$(‘#suggestions’).fadeOut(1000);
alert(‘Has seleccionado el ‘+id+’ ‘+$(‘#’+id).attr(‘data’));
return false;
});
}
});
}
});
});
Hola, muchas gracias por el aporte, estoy desde hace tiempo rompiéndome la cabeza con los códigos html xque soy principiante y necesito que el buscador de mi blog, muestre sugerencias con los nombres de las entradas que tengo para que así no haya errores en las búsqueda, pero no sé como incluir este código para que se vincule con todas las entradas de mi blog y no solo una datalist. Me podrías ayudar?? espero tu respuesta con ancias.
Hola,
Si no tienes mucho conocimiento y estás usando WordPress para tu blog te recomiendo que busques un plugin para simplemente instalarlo. Si no tienes mucho conocimiento de programación, te costará unas horas poderlo implementar a medida.
Si necesitas ayuda con esto puedes enviar tu petición a:
https://www.jamodules.com/prestashop-addons/es/soporte
Y lo podemos estudiar.
Saludos
Hola José demasiado bueno este aporte y super agradecido por el tiempo invertido, una consulta al respecto cuando acepto la consulta el me envía a index.php que no esta en el select del index.html y no lo encuentro en los archivos. ¿Podríais decirme la ubicación de este llamado?. De antemano muchísimas gracias.
Hola,
He estado revisando el tutorial pero no he podido encontrar un archivo index.php. No estoy seguro si será algo especial de tu código, ¿puede ser?
Saludos
Estoy realizando una factura y en la parte de los productos necesito añadir una linea adicional para buscar otro producto y seleccionarlo esta parte la tengo realizada pero no me está funcionando la acción de buscar cuando escribo el nombre del producto, habías comentado que para que funcione debía de utilizar el class pero no me funciona te dejo el código por si me puedes ayudar con esto
$(‘#concepto’).on(‘keyup’, function() {
console.log(«esta mierda»);});
BUENAS TARDES JOSÉ, EXCELENTE TU APORTE. TE CONSULTO POR LA SIGUIENTE SITUACIÓN.
YO TENGO EL INPUT «CARRERA» (UN INPUT EN DONDE MEDIANTE TU FUNCION SE AUTOCOMPLETA UNA CARRERA DE UNA INSTITUCIÓN QUE SE OBTIENE DE LA BASE DE DATOS) EN DONDE APLICO EL AUTOCOMPLETADO, ME ANDA PERFECTO.
PERO, ESE MISMO INPUT «CARRERA» LO CLONO, ES DECIR EN UN MISMO FORMULARIO PUEDE AGREGAR HASTA 3 CARRERAS, EL PROBLEMA ES QUE LA FUNCIÓN DE AUTOCOMPLETADO SOLO ME FUNCIONA CON EL INPUT ORIGINAL. ES DECIR NO FUNCIONA CON LOS INPUT CLONADOS. COMO PUEDO HACER QUE LA FUNCIÓN DE AUTOCOMPLETADO FUNCIONES PARA TODOS LOS INPUT CLONADOS TAMBIÉN? GRACIAS
Hola,
La solución a tu problema es no usar un identificador del elemento para localizarlo. Usa una clase.
SAludos
Tengo un problema, tu solución es muy buena pero yo tengo un array de lineas y no se como acceder al onkeyup.
$(‘#key’).on(‘keyup’, function() {
});
No funciona, puedes ayudarme?
Gracias.
Hola,
En un array de lineas no puedes usar el identificador como clave. Tendrás que usar una clase. Algo como los siguiente:
$(‘.key’).on(‘keyup’, function() {
…
Saludos
Hola Jose, como estas ?
todo mi agradecimiento por compartir tu conocimiento.
estoy queriendo poner un campo autocompletar como el que mostras en una ventana modal.
en ese campo solo debo mostrar el codigo del articulo tipeado y si descripcion.
Estoy tratando de implementarlo pero no logro hacer funcionar esa funcionalidad en dicha ventana.
Sabes a que se puede deber ?
muchas gracias
Hola,
Me gustaría poder ayudarte pero necesitaría ver tu código en pantalla. ¿Puedes enviar un enlace?
Saludos
Hola José,
ante todo felicidades por la página y muchas gracias por compartir tu conocimiento.
he puesto a funcionar tu propuesta de autocompletado con una BBDD mysql (codificada en utf8_general_ci) que tengo y funciona bastante bien. Mi problema ahora es la codificación latina, que no logro visualizar los carácteres como ñ. Poniendo mysqli_set_charset ($connexion,»utf8″); despues de conectar con la BBDD consigo que los reconozca para el SELECT, pero aun y darle bastantes vueltas aun no consigo que pinte la salida con esos carateres bien. Las ñ las pinta à por ejemplo.
te agraderia mucho si me ayudaras
Gracias de antemano
Te agradeceria mucho si me
Hola,
Revisa a ver si te sirven las funciones utf8_decode() o utf8_encode() que tiene PHP para mostrar la salida de los títulos latinos.
Saludos
saludos, como hago para agregarle un scroll cuando son muchos items?
Hola,
Es posible que esto te pueda servir:
https://www.jose-aguilar.com/blog/scrollbar-vertical-horizontal/
Saludos
Podrias regalarnos los css, para darle formato a mi input y el boton con la imagen
Hola,
El código del ejemplo completo se puede descargar. Hay un botón al final del artículo. El código CSS está dentro de /css/styles.css
Saludos
Tremendo aporte, me ahorraste horas de trabajo, ya que estaba usando datalist y al crecer la cantidad de productos, uff quedo inservible el objeto
Buenas tardes. Muchas gracias José por el código. Funciona genial.
Me gustaría agregarle una opción para que se borre (fadeout) la lista de resultados si el usuario decide borrar lo que escribió en el imput y dejar el imput en blanco. Cuando ocurre eso, la lista que se obtuvo desde la base de datos queda visible y me gustaría que desaparezca. Espero que se entienda. Muchas gracias!
Hola,
No creo que sea muy difícil. Dentro del success de la llamada ajax que retorna resultados pueden agregar la llamada a un evento. Ahí puedes situar el control del evento que borra con fadeout el contenido del input.
Saludos
La funcion success podría quedar de la siguiente forma —->
success : function(data) {
//Escribimos las sugerencias que nos manda la consulta
$(‘#suggestions’).fadeIn(1000).html(data);
//Al hacer click en algua de las sugerencias
$(‘.suggest-element’).on(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).text();
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#curp’).val(id);
//Hacemos desaparecer el resto de sugerencias
$(‘#suggestions’).fadeOut(1000);
});
},
y para limpiar el select una vez enviado el formulario ?
aun no logro hacerlo….
Excelente aporte amigo
El unico inconveniente que tengo, es que quisiera devolver mas de un dato, pero me estoy rompiendo la cabeza tratando de hacerlo, espero tu pronta respuesta
atte.
Hola buenos días,
Para devolver más de un dato quizá debes emplear json. En el siguiente tutorial puedes ver un ejemplo:
https://www.jose-aguilar.com/blog/ajax-vs-json-respuesta-multiple/
Saludos
Ahora si.
Hola me gustaría mostrarles las correcciones para que les pueda funcionar bien el código, mas que nada existen dos errores:
1) En el archivo php donde hacemos la consulta a la base de datos, el echo iria asi:
« »
es decir que la clase «suggest-element» no va dentro de div, si no del a.
2) En la parte de ajax en ves de poner:
$(‘.suggest-element’).live(‘click’, function(){
deben cambiarlo el live por u on:
$(‘.suggest-element’).on(‘click’, function(){
o también sirve cambiar el live por un click:
$(‘.suggest-element’).click(function(){
Espero les sirva y ahorre un poco de tiempo, Saludos.
Hola me gustaría mostrarles las correcciones para que les pueda funcionar bien el código, mas que nada existen dos errores:
1) En el archivo php donde hacemos la consulta a la base de datos, el echo iria asi:
es decir que la clase «suggest-element» no va dentro de , si no del .
2) En la parte de ajax en ves de poner:
$(‘.suggest-element’).live(‘click’, function(){
deben cambiarlo el live por u on:
$(‘.suggest-element’).on(‘click’, function(){
o también sirve cambiar el live por un click:
$(‘.suggest-element’).click(function(){
Espero les sirva y ahorre un poco de tiempo, Saludos.
Hola,
Efectivamente. Este post es antiguo y antes se usaba «live». Ahora se puede emplear «on» entre otras opciones para obtener el evento click.
Saludos
hola amig@s
muy bueno ek tuto..
por fa nesecito su ayuda…por faaa
como imprimo en otro imput type «text» el valor de la segunda variable
service_id
anticipo mi agradecimiento,…
Hola buenos días,
No estamos seguros de lo que necesitas pero creo que el siguiente código te puede ayudar:
$(‘#otro_input’).val($(‘#service_id’).val());
Saludos
José muy gentil en responder….
pienso solo será de ajustar 1 linea
pero no logro hacerlo….
TODO FUNCIONA MUY BIEN…
pero no logro capturar el value del service_id en otro input type»text»
el código en si es el mismo con la misma base
adjunto mi codigo:
INDEX.PHP
//========================================
CHUCHO jQuery Ajax Autocomplete
.suggest-element {
width:100%;
cursor:pointer;
background-color: #ECECEC;
margin-top: 1px;
padding-bottom: 5px;
padding: 5px;
float:left;
}
.suggest-element:hover {
background-color:#999999;
color:#FFFFFF;
}
#suggestions {
width:346px;
height:155px;
overflow: auto;
}
#suggestions .item{
float: left;
width: 319px;
}
#result {
background-color: #EDEDED;
clear: both;
color: #999999;
margin-bottom: 10px;
padding: 5px;
width: 500px;
}
$(document).ready(function() {
//Al escribr dentro del input con id=»service»
$(‘#service’).keypress(function(){
//Obtenemos el value del input
var service = $(this).val();
var dataString = ‘service=’+service;
//var dataString = ‘service=’+ service + ‘&idemix=’+ idemix;
//var dataString = ‘id=’+service+’& id=’+id;
//$(‘#result’).remove();
//Le pasamos el valor del input al ajax
$.ajax({
type: «POST»,
url: «autocomplete.php»,
data: dataString,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$(‘#suggestions’).fadeIn(1000).html(data);
//Al hacer click en alguna de las sugerencias
$(‘.suggest-element’).live(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr(‘id’);
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#service’).val($(‘#’+id).attr(‘data’));
//ESTA ES LA LINEA QUE ME ENVIO AMIGO
$(‘#idemix’).val($(‘#service_id’).val());
//ESTA ES LA LINEA QUE ME ENVIO AMIGO
//Hacemos desaparecer el resto de sugerencias
$(‘#suggestions’).fadeOut(1000);
$(‘#result’).html(‘Has seleccionado el ‘+id+’ ‘+$(‘#’+id).attr(‘data’)+»);
});
}
});
});
});
//=========================================
AUTOCOMPLETAR.PHP
<?php
header( 'Content-type: text/html; charset=iso-8859-1' );
require('config.php');
//$search ="a";
$search = $_POST['service'];
//echo "SELECT title FROM services WHERE title like " . $search . "% AND status=1 ORDER BY title DESC";
$query_services = mysql_query("SELECT service_id, title FROM services WHERE title like '" . $search . "%' AND status=1 ORDER BY title DESC", $conexion);
while ($row_services = mysql_fetch_array($query_services)) {
echo '
‘.$row_services[‘title’].’
‘;
// $variablePHP = $row_services[‘service_id’];
// echo $variablePHP;
}
?>
Anticipo mi agradecimiento
mil gracias
Buenas tardes,
Tu aportación es genial, yo en mi blog tengo una entrada muy parecida pero no hace conexión con la BBDD lo deje como pendiente para escribirla más tarde. Además veo que utilizas el mismo método. Bueno te guardo en favoritos.
Lo que si te faltó fué el ejemplo en vivo eso si lo tuve yo en cuenta. Puedes echar un vistazo al mio para completar un poco este post 😉
https://quecosasleo.com/2017/05/input-con-autocompletado/
como valido, para que el usuario solo ingrese un valor del autocomplete.php
El problema que no agregar el valor en el campo al clickear una opcion es porque en el archivo «autocomplete.php» la clase «suggest-element» NO debe ir en el DIV sino en la etiquea A.
Saludos!
Hola que tal, me podrías indicar cual es el nombre de la tabla y de la base de datos, asi como su estructura, por que me marca un error asi que no estoy muy segura de los cambios que estoy realizando
Hola buenas tardes,
Que error te aparece para que tengamos una pista? En el ejemplo el nombre de la tabla es «services» y esta tabla tiene 3 campos. Podría tener más y el ejemplo funcionaría igual, pero los que se usan son:
service_id – clave primaria
title – varchar 75
status – int 2
Saludos
Excelente post, como podria hacerle para que solo seleccione alguna de las sugerencias y no la nueva entrada que haya escrito
solucion cambien la class=»suggest-element».
saquenla del div y la colocan en
Lo modifique segun dicen algunos arriba de esta forma..
while ($row_services = mysql_fetch_array($query_services)) {
echo ‘‘.utf8_encode($row_services[‘title’]).’‘;
}
pero sigue igual..
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\autocomplete\autocomplete.php on line 9
IDOLO !!… estimado… he hecho todo paso a paso… pero al darle al ejemplo… en los resultados (listado) que deberia arrojar, me aparece:
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\autocomplete\autocomplete.php on line 9
y la linea 9 dice…
while ($row_services = mysql_fetch_array($query_services)) {
echo ‘‘.$row_services[‘title’].’‘;
}
alguna idea donde esta el error
gracias miles
Hola, revisa que la query se esté ejecutando correctamente. Saludos
Hola josé, puedes ayudarme con algo, se trata del famoso mensaje: ‘Esta escrbiendo…’ Podrías hacer un tutorial sobre eso? .Sería de gran ayuda
Hola, intentaremos revisar si es posible incorporarlo en nuestra agenda de entradas programadas. Saludos
Bravo por el tutorial.
Acabo de implementarlo en mi pagina: http://paginas-amarillas.avisus.net
He modificado el CSS para resaltar el termino buscado.
Quisiera que me ayudaran en esto que les voy a plantear
Tengo una base de datos que almacena los siguientes datos
Carnet
Nombre
Primer Apellido
Segundo Apellido
y tengo un formulario hecho donde debo poner esos datos que almaceno. Que es lo que quiero hacer que cuando yo ponga el numero de carnet de una persona el automaticamente me llene los demás input con el nombre y los apellidos de la persona. esto debe ser con php y extrallendo los datos de mysql
No se si me explique bien, pero creo que si
Si, utilizando las tecnología jQuery, Ajax, PHP y MySQL es posible. Te puedes basar en este post o alguno que tengamos en la sección Ajax para programar tu caso específico que creo que en lo único que varía es que tu necesitas retornar varios parámetros desde el PHP al javascript. Quizás lo puedas hacer retornando un string con el contenido html.
hola Miguel..
buen dia
como te fue con tu nesecidad..
lograste llenar todos los campo al seleccionar un ide en el campo auto completar ?
si es asi…
ayudame nescito exactmaente lo mismo…
mil gracias…
hola jose, muy practico tus tutoriales . Son de gran ayuda, para el style del div sugestion y element
como hago para que no se me corra todo lo que esta en el formulario , de la manera que esta puesto se me corre todo. osea que quede como un bloque arriba de los demas campos
Hola,
No estoy seguro porque es un poco difícil hablar sin ver ni probar pero creo que tendrás que englobar el formulario en un contenedor (
Saludos
Hola muchas gracias por este ejemplo ya que me funciono muy bien pero ahora tengo un pequeño problema quisiera usarlo para los inputs dinámicos y no puedo hacer que funcione alguna idea
Hola,
Si, para los inputs dinámicos tendrás que jugar con los class en vez de con un id.
Saludos
Muy bueno tu ejemplo y bien explicado, además leyendo los comentarios de las personas pude realizar algunas correcciones. Muchas gracias.
José, tengo la siguiente situación; cuando escribo me salen las sugerencias, pero cuando borro y hago clic afuera del textbox me sigue mostrando el listado de sugerencias completo. ¿Cómo puedo hacer para que cuando borro y me salgo del textbox el listado desaparezca?.
Por otro lado, me gustaría saber ¿cómo puedo hacer para tomar el valor seleccionado para ingresarlo en otro textbox de otro formulario que se genera dinamicamente?
Agradecido de antemano y te felicito por tu aporte!
Hola,
En el código javascript puedes poner algo como:
$(‘body’).on(‘click’, function() {
$(‘#suggestions’).slideUp(‘slow’);
});
Eso significa que al hacer click en cualquier parte de la página las sugerencias desaparecen. Después puedes controlar el borrado tal como sea.
Para tomar el valor seleccionado tendrás que jugar con el click del elemento para copiar su valor en otro campo de texto. Es posible.
Saludos
El ejemplo funciona perfectamente, pero no he podido hacer que funcione, ¿Podrían facilitarme el código?
Hola buenos días, pasarte el código completo nos resulta un poco complicado ya que son varios archivos incluido base de datos. Te tendríamos que preparar un archivo empaquetado. Entonces, yo creo que en tu ejemplo no está funcionando el php o te falte conectar con la base de datos:
http://www.jose-aguilar.com/blog/conectar-php-con-mysql/
Creo que deberías debugar el código para ver que sucede en tu ejemplo. si quieres facilítanos una url del ejemplo para que lo podamos ver y decirte que está pasando realmente.
Saludos
donde puedo descargar el codigo
Hola quisiera una vez obtenido el ID del valor buscado utilizarlo para hacer la consulta en PHP nuevamente un select basico para cargar en un factura los articulos buscados. como puedo trasladar ese valor, lo obtengo pero n se como manejarlo, gracias.
excelente aporte solo hay que acoplarlo a lo que uno necesita gracias
quisiera pasar dos parametros post
Hola, me parece que tan solo tienes que editar esta linea:
var dataString = ‘service=’+service;
Por algo asi:
var dataString = ‘service=’+service+’&other=’+other;
Saludos
Excelente!!! muchas gracias 😀
Me has ayudado como no tienes idea 🙂
No sale el cambio de la segunda parte que mencione, pero seria cambiar el DIV class=»suggest-element» a DIV <a class="suggest-element"
2- El echo del archivo php tiene una referencia incorrecta en el DIV:
‘‘.utf8_encode($row_services[‘title’]).’‘;
por
‘‘.utf8_encode($row_services[‘title’]).’‘;
Buenas, he realizado algunas correcciones al código y me funciono, estos serian los ajustes a realizar:
1- Si la version del JQUERY es nueva cambiar la linea:
«$(‘.suggest-element’).live(‘click’, function(){»
por
«$(‘#suggestions’).on(‘click’,’.suggest-element’, function(){»
2- El echo del archivo php tiene una referencia incorrecta en el DIV:
echo ‘‘.utf8_encode($row_services[‘title’]).’‘;
por
echo ‘‘.utf8_encode($row_services[‘title’]).’‘;
Me di cuenta de esto depurando y comparando el código en la ejecución del ejemplo.
Espero los ayude. Saludos desde Paraguay!
Muchas gracias
jose, ya nada,, ya lo arregle
Hola jose, mira que estoy mirando tu codigo y he metido tu proyecto en la carpeta del htocs de mi xampp he generado el script sql como tu lo tienes en la base de datos tuya y al ahora de ejecutar el programa, me da el siguiente error en el autocomplete.php : Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\autocomplete\autocomplete\autocomplete\autocomplete.php on line 9, la verdad que yo no he tocado nada de tu codigo solo lo del config.php para adaptarlo a mi mysql.
No entiendo porque me da ese error, me podrias decir porque me da ese error? gracias.
Jose aguilar, me podrias pasar todos los archivos que utilizas para el autocompletar campo con jquery ajax y php, es que tengo que realiza una insercion de datos a la base de datos con un formulario html pero que contiene un campo autocomplete y claro soy novato en ajax y me gustaria ver tus archivos de tu ejemplo para asi mas o menos guiarme
Hola buenas tardes,
Puede descargar todos los archivos de la demo en: http://www.jose-aguilar.com/scripts/jquery/autocomplete/autocomplete.zip
Recuerde que la demostración función con una base de datos.
Tienes que ejecutar en una tabla de la base de datos el archivo services.sql y editar el archivo config.php para ponerlo a funcionar.
Saludos
Excelente el aporte, lo he adaptado a mi base de datos, y según voy escribiendo me aparece el listado filtrado por las teclas que presiono.
Pero por mucho que presione con el ratón e alguna de las filas, no hace nada, osea no se rellena el input, tampoco aparece el alert.
Cambié «$(‘.suggest-element’).live(‘click’, function(){» por
«$(‘.suggest-element’).click(function(){» y ya funciona
Excelente aporte me funcionó al toque
Podrias poner el archivo config es que al momento de mostrar los resultados, y darle clic a la sugerencia desaparecen todas y no se pone el cliqueado
De antemano muchas gracias.
Excelente aporte.
El archivo config.php es tan solo para conectar con la base de datos.
Esta muy bueno lo que mostras como ejemplo, ahora si yo quisiera usar de es array asociativo que haces el services id para luego ser insertado en un detalle de facturacion en una tabla mysql como lo haria, porque pasandolo por post dentro de un form me tomaria la descripcion del servicio opero no el id, y por ejemplo en el problema que yo tengo a resolver yo necesitaria que autocomplete el nombre del servicio pero cuando pase a la pagina php que inserte tome el vaor del id de servicio del array asociativo y no su descripcion. Si podes respondereme y sacarme la duda desde ya muchas gracias.
Un saludo cordial.
Quiero decir que este ejemplo es un falso autocompletar.
nunca se usa el atributo autocompletar de jquery
jQuery UI Autocomplete – Default functionality
$(function() {
var availableTags = [
«ActionScript»,
«AppleScript»,
«Asp»,
«BASIC»,
«C»,
«C++»,
«Clojure»,
«COBOL»,
«ColdFusion»,
«Erlang»,
«Fortran»,
«Groovy»,
«Haskell»,
«Java»,
«JavaScript»,
«Lisp»,
«Perl»,
«PHP»,
«Python»,
«Ruby»,
«Scala»,
«Scheme»
];
$( «#tags» ).autocomplete({
source: availableTags
});
});
Tags:
este es el verdadero autocompletar.
Muy bueno jose! muchisimas gracias anda perfecto con algun retoque simplemente.
Te felicito!
que tal amigo. exelente tu aporte. pero tengo un problemita.
quiero solo sacar un nombre de mi base de datos…
osea comienzo a escribir el nombre del cliente y me aparezcan las sugerencias pero solo de un campo..
muchas gracias por tu ayuda
muchas gracias por el ejemplo me servirá de mucho.
Para los que no les aparece el texto en el input al presionar un elemento de la lista, agrege una «a» al .suggest-element …… $(‘.suggest-element a’).live(‘click’, function(){
por lo menos a mi me funciono de esta manera.
que tal buen dia, oye tengo una duda en esta parte del código en el archivo autocomplete.php:
id=»service’.$row_services[‘service_id’]
en la variable $row_services[‘service_id’]
que valor almacena y de que tipo es si es entero o varchar
lo que pasa es que del ejemplo que pusiste al seleccionar la palabra que busco no me muestra el alert ni desaparece las sugerencias y segun yo es por que no estoy poniendo el valor que debe ser en ese campo
Hola,
Creo recordar que es un identificador, por lo tanto, es un número entero. Es el identificador del servicio en la base de datos.
saludos
Hola Jose Aguilar tengo un problem con autocomplete es que al momento de hacer la busqueda me indica que encontro N cantidad de resultados de pero el listado me lo muestra en blanco no se que estoy haciendo mal.
espero me puedas ayudar
Hola,
Nos tendrás que facilitar la url de tu web para que podamos ver el error.
Saludos
Excelente aporte, me sirvio para darme una idea de como desarrollar mi pequeño modulo, yo agregue lo siguiente .
HTML
JS
$(‘#finder’).keyup(function(){
var datoBuscar = $(«#finder»).val();
if(datoBuscar != «»){
var table = selectTable(); // func que me dice a que tabla buscar
findAutocomplete(datoBuscar,table);
}else{
if($(«#encontrados»).length)
$(«#encontrados»).remove();
$(«#finder»).focus();
}
});
$(«#dataFinder»).on(«click»,findSeleccion);
var findAutocomplete = function(datoBuscar,table){
$.ajax({
url:»pag.php»,type:»POST»,async:true,dataType:»json»,
data: {opcion:’243′, cadena:datoBuscar, tabla:table},
success : function(resultado) {
console.log(‘datos encontrados: ‘+resultado[1]);
if($(«#encontrados»).length)
$(«#encontrados»).remove();
var datos = resultado[1];
$(«#suggestions»).append(»);
for (var i = 0; i < datos.length; i++) {
$("#encontrados").append('’+datos[i]+»);
$(«#found»+i).on(‘click’,setFinder);
};
}
});
}
var setFinder = function(){
var id = this.id;
var texto = $(«#»+id).text();
$(«#finder»).val(texto);
if($(«#encontrados»).length)
$(«#encontrados»).remove();
}
PHP
switch ( $_POST[‘opcion’] ) {
case ‘243’:
findData($_POST[‘cadena’], $_POST[‘tabla’]);
break;
}
function findData($datos,$tabla){
$jsondata =»»;
$vars = array($datos,$tabla);
$Cone = conex(‘XXX’);
$resultado = «»;
$result = $Cone->query(consultas(‘opSwitchQuery’,$vars));
$row_cnt = $result->num_rows;
if($row_cnt){
$i = 0;
while( $row = $result->fetch_array(MYSQLI_NUM) ) {
$resultado[$i] = $row[0];
$i++;
}
$jsondata[0] = 1; // exito
$jsondata[1] = $resultado;
}else
$jsondata[0] = 0; // fracaso
$Cone->close();
echo json_encode($jsondata);
}
Nota: consultas es una función la cual contiene un case en la cual agrupo todas mis consultas.
De esta manera adapte el código proporcionado por Jose Aguilar..
Gracias, este tipo de explicacion ayuda a ser mejores cada dia.
Espero que les sirva mi comentario
Muchas gracias por el tutorial me sirvio bastante saludos desde colombia
Hola Jose no se si te habrás dado cuenta (o alguien más se dio cuenta) pero el código tiene un pequeño error y es que la primera vez que captura el valor del input con el keypress no bota el valor de la tecla (la que se haya pulsado) y en vez de eso muestra todas las opciones (de la base de datos), y no se si me puedas ayudar porque ese pequeño error me vuelva loca porque si tenemos una BD con unos 50000 registros al pulsar la primera tecla (que lo coge como nulo o vació) mostraría esos 50000 registros (cosa que no debería suceder), me podrías hechar una mano.
Haz un «do-while» 😉
Hola Rodrigo, se que ha pasado mucho tiempo de esta respuesta, pero podrías explicarme un poco lo del do-while????
Modifica el evento asi:
$(‘#service’).on(‘input’,function(){
De esta forma ya coge el primer carácter introducido. Con keypress el evento se ejecuta antes de que se escriba en el value y de ahi que el primer caracter salga vacío y al seguir escribiendo la consulta vaya un carácter por detras.
Ok, también funciona de esa forma, aplicado al ejemplo, gracias por la aportación.
El problema de obtener el id se soluciona agregando una «a» a la clase en el live de jquery 😉
$(‘.suggest-element a’).live(‘click’, function(){
Saludos! 😉
Excelente gracias!
Primeramente agradecerte Jose por compartir estos ejemplos muy buenos, también me has sacado de apuros.
Bueno, lo que tienen que hacer es lo siguiente:
modificar el echo que se encuentra en el while (autocomplete.php) de la siguiente manera:
echo \'<div class=\"item\"><a class=\"suggest-element\" data=\"\’.$row_services[\’title\’].\’\" id=\"service\’.$row_services[\’service_id\’].\’\">\’.utf8_encode($row_services[\’title\’]).\'</a></div>\’;
Con esa modificación ya funciona 🙂 ..
Primeramente agradecerte Jose por compartir estos ejemplos muy buenos, también me has sacado de apuros.
Bueno, lo que tienen que hacer es lo siguiente:
modificar el echo que se encuentra en el while (autocomplete.php) de la siguiente manera:
echo ‘‘.utf8_encode($row_services[‘title’]).’‘;
Con esa modificación ya funciona 🙂 ..
¿Que version de JQuery hay que usar? ya lo intenté y no me da el listado de registros para seleccionar 🙁
En el ejemplo en funcionamiento se está usando: jQuery JavaScript Library v1.4.2, pero yo he probado este script con otras versiones de jquery superiores y me ha ido bien.
Hola Jose, igual como te comentaba Gero Fong no logro entender por que no aparece nada en el parrafo, al momento que estas en esta parte
$(‘.suggest-element’).live(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr(‘id’);
console.log(«numero->»+id);
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#service’).val($(‘#’+id).attr(‘data’));
//Hacemos desaparecer el resto de sugerencias
$(‘#suggestions’).fadeOut(1000);
$(‘#result’).html(‘Has seleccionado el ‘+id+’ ‘+$(‘#’+id).attr(‘data’)+»);
});
por que ID no obtiene el valor que se regreso del archivo autocomplete? lo que se imprime en el parrafo es
—> Has seleccionado el undefined undefined
Me tendrás que mostrar el ejemplo completo en funcionamiento para verlo.
En mi caso se arregló sustituyendo el evento live(click,function()) por simplemente el evento click(function()).
Quizás sea un problema de versión de jquery. No sabría decirte.
Hola jose, muy bueno tus ejemplos y como explicas el codigo, queria consultarte, tenes algun ejemplo de algun calendario donde pueda guardar editar y eliminar eventos?
Saludos y muchas gracias.
A lo mejor te puede servir este mini-poyecto que hice:
http://www.jose-aguilar.com/projects/eventos_online/demo/
Hola mi nombre es Gero, su ejemplo es bueno, pero no me está resultando del todo. Ojala me pueda ayudar con autocompletar por favor. He seguido su ejemplo paso por paso. Hice algunos cambios para adaptarlo a mi base de datos. El autocomplete.php queda de la siguiente manera:
<?php
header( 'Content-type: text/html; charset=iso-8859-1' );
$link = mysql_connect('localhost', 'suma_admin17', 'admin17');
if (!$link) {
die('Could not connect: ' . mysql_error());
}
else {
// echo 'Conexión exitosa: ‘;
}
$base = «suma_suma»;
mysql_select_db($base) or die(‘No pudo seleccionarse la BD.’);
$search = $_POST[‘service’];
$query_services = mysql_query(«SELECT numero, nombre FROM vecinos WHERE nombre like ‘» . $search . «%’ ORDER BY nombre DESC»);
while ($row_services = mysql_fetch_array($query_services)) {
echo ‘‘.utf8_encode($row_services[‘nombre’]).’‘;
}
?>
Aquí estoy cambiando el nombre de la tabla por “vecinos”, el service_id por “numero” y el title por “nombre”, también suprimí la condición “AND status = 1” y también el complemento “, $conexion”.
Hasta aquí no parece haber ningún problema, la consulta sale bien. Y se muestra la lista de opciones correctamente. El problema es cuando selecciono una opción, simplemente desaparece la lista sin capturar realmente ningún dato. El text box queda en blanco. Esta es la parte que no se logra:
//Al hacer click en algua de las sugerencias
$(‘.suggest-element’).live(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr(‘id’);
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#service’).val($(‘#’+id).attr(‘data’));
Ojala me pueda ayudar con esto. Por su atención gracias.
Me parece que donde habías quitado la variable $conexion debes sustituirla por $link que es la que utilizas tu para conectar con tu base de datos.
Espero que sea eso,
Saludos
Hola Jose, gracias por la respuesta. Pero no es eso, porque si hay conexión, es decir los resultados si se muestran en la lista, pero a la hora de seleccionar una opción, ahí es la bronca porque simplemente desaparece la lista y el text box queda vacio. Otra cosa es que estoy usando:
No se si eso tenga que ver.
Saludos
Perdon en el comentario anterior no salio lo que estoy usando.
jquery-1.8.2.js y jquery-ui-1.9.0.custom.min.js
no se si tenga que ver.
Saludos
hola Gero Fong, tambien tengo el mismo problema de que al momento de seleccionar algo de la lista, desaparece y no carga nada en el parrafo de arriba, he intentado varias cosas pero no, lo has podido resolver?
BUENAS. tengo el mismo problema. Estoy utlilizando jquery-1.9.1.js
El error pararece con esta linea
$(‘.suggest-element’).live(‘click’, function(){
probe
$(‘.suggest-element’).on(‘click’, function(){
si bien puedo ver la lista de opciones, parecer al hacer click toma todas las opciones y queda en blanco por favor si alguien puede ayudar estare agradecido. aca dejo el codigo. gracias
$(document).ready(function() {
//Al escribr dentro del input con id=»service»
$(‘#service’).keypress(function(){
//Obtenemos el value del input
var service = $(this).val();
var dataString = ‘service=’+service;
//Le pasamos el valor del input al ajax
$.ajax({
type: «POST»,
// cambié el nombre de la url
url: «autocompletar.php»,
data: dataString,
success: function(data) {
//Escribimos las sugerencias que nos manda la consulta
$(‘#suggestions’).fadeIn(1000).html(data);
//Al hacer click en algua de las sugerencias
$(‘.suggest-element’).live(‘click’, function(){
//Obtenemos la id unica de la sugerencia pulsada
var id = $(this).attr(‘id’);
//Editamos el valor del input con data de la sugerencia pulsada
$(‘#service’).val($(‘#’+id).attr(‘data’));
//Hacemos desaparecer el resto de sugerencias
$(‘#suggestions’).fadeOut(1000);
});
}
});
});
});
Hola, yo también tuve el problema de que al seleccionar una sugerencia no me llevaba el valor al campo de texto.
Lo solucioné sustituyendo la línea:
$(‘#service’).val($(‘#’+id).attr(‘data’));
Por la línea:
$(‘#service’).val(id);
Espero que te sirva.
Saludos.
Estimado. Si tengo 2 formularios y quiero diferenciar los campos? escribiria la funcion data solo cambiando los nombres? el nombre de formulario afecta los nombres de los inputs?
gracias por tu ayuda
buwnas tarde mipana me salvaste la vida todo fino un consejo es mejor armar a pedal el formato json para saber bien como funciona pero el jsonp encode esuna maravilla ttraforma el array gracias un millon siga publicando post asi de buenos
Hola podrias indicar como se llamas cada archivo para poder hacer el ejemplo por fas…
Yo tengo un problema de despues de que se autocomplete me llene varios campos con la informacion existente me podrias decir la forma mas sencilla de hacerlo o mostrar un ejemplo por favor gracias..
Hola,
Lo que se me ocurre de entrada es que en el success del ajax te rellene esos campos con la información existente. Seguramente deberás utilizar la función val() pasándole el valor de los campos para rellenarlos.
ejemplo:
$(input#name).val(value);