Funcion de autocomplete con PHP y MySQL

Video tutorial sobre como utilizar la funcion de autocomplete de jQuery UI para mostrar sugerencias de información contenida una base de datos MySQL.

Este es el primero de una serie de tutoriales acerca de desarrollo web 2.0 y por esto nos gustaria escuchar sus opiniones y comentarios.

Para visualizar el codigo fuente pueden hacer click aqui o si prefieren descargarlo pueden hacerlo aqui.

  • maurcio

    como puedo poner la opcion de que me muestre el resultado pero presionando un boton

  • http://www.facebook.com/NoloSubwoofer Jacob Palmer

    Javier buenas noches, el código corre muy bien pero al que querer guardar el texbox que se auto complementa en otra tabla no se guarda nada como si estuviera vació espero puedas ayudarme saludos

  • http://www.facebook.com/NoloSubwoofer Jacob Palmer

    javier esta muy bueno tu codigo y el tutorial gracias por compartirlo, tengo una duda que parte de codigo tendria que omitir para que solo haga la autocomplementacion sin que muestre los datos del usuario, espero ser claro con mi duda y muchas gracias

  • Mauricio Muñoz

    estimado:

    eh utilizado tu ejemplo y me ha funcionado muy bien pero tengo un problema, como puedo hacer para que se cargue la opcion de autocompletado en varios input, ya que solo me carga en el primero. Me gustaria implementarlo en este codigo:
    $i=1;
    while($i<=$numero_beneficiarios){
    $rut_b="rut_b".$i;
    $num_prof="num_prof".$i;

    echo "”;
    echo “Beneficiario $i “;
    echo “”;
    echo “”;
    echo “”;
    $i++;
    }

    Un ciclo while que crea imputs dependiendo de la cantidad de beneficiarios que fueron definidos en una pagina anterior. El problema como dije es que al implementarlo solo se ejecuta en el primer input o textbox y en los demas no pasa nada. Creo que porque solo se carga en el primero.

    • http://www.jvsoftware.com/ Javier Villanueva

      En lugar de usar `$(‘#buscar_usuario’)` para seleccionar el elemento con jQuery usa algo como `$(‘input:text’)` y te va a ejecutar el autocomplete en todos los input the tipo “text”

      • Mauricio Muñoz

        la verdad, es que en cierta forma me ayudo pero, como puedo hacer para que solo se vea en los que son rut y no en los demas input porque seria molesto para el usuario que le aparezcan los rut de los beneficiarios en todos los cuadros de texto. (Gracias por la rapida respuesta).

      • http://www.jvsoftware.com/ Javier Villanueva

        Agrega una clase a los input que quieras por ejemplo “autocomplete” y el selector lo cambias a: `$(‘.autocomplete’)`

      • Mauricio Muñoz

        Gracias, eso es lo que quería.

  • Ricardo Acevedo

    hola muy bueno el tutorial primero que todo, pero tarda un poco en ejecutar no hay manera de cambiar eso?

  • Alonso Martinez

    como puedo guadar el valor del autocomplete a una tabla de una base de datos

  • http://twitter.com/_FGCA FGCA

    Me sirvió muchísimo cabe señalar que el código tal cual funciona a la perfección, solo que la mayoría de los errores suelen pasar en la parte de la base de datos para eso yo recomiendo que debugeen con google chrome con la herramienta “inspeccionar elemento” y luego “Network”

  • Victor

    Buenos días Javier muy bueno el tutorial. Tengo una pregunta como se podria mostrar el resultado de la consulta en una ventana nueva. Lo he intentado y no se como hacerlo. Gracias

  • Paco

    Hola que tal me sirvió bastante, pero
    tengo una duda a la hora de mostrar en el autocomplete los muestra una lista
    vacia pero seleccionas alguno y si muestra los datos no se a que se refiera,
    pense que en el css, pero cuando los muestro en los arrglos de manera estatica
    no hay ningún problema, me
    podrias ayudar

  • Paco

    Paco:

    Hola que tal me sirvió bastante pero tengo una duda a la hora de mostrarse en el autocomplete los muestra una lista vacia pero seleccionas alguno y si muestra los datos no se a que se refiera, pense que en el css, pero cuando los muestro en los arrglos de manera estatica no hay ningún problema, me podrias ayudar

  • Rumbo

    No me reconoce ni las ñ ni las tildes. Sabéis como puedo solucionarlo? Gracias.

    • Rafael Castro

      para que te reconozca las ñ tenes que utilizar utf8-encode y utf-8 decode, lee al respecto para que esto te funcione porque tienes que decodificar cuando viene de la base de datos para que muestre las ñ, y viceversa.

      Tambien le puedes cambiar la codificación a la BD, esto se llama cotejamiento, buscas las utf-8 y dentro de ellas te aparece esta: utf8_spanish_ci
      y con eso ya va, asi solo codificas las salida al usuario con uft8-encode

      • Rumbo

        lo de poner utf8_spanish_ci, ya lo había probado pero no funciona, y lo de utilizar utf8-encode decode, no encuentro información de cómo usarlo aquí, me podrías orientar un poco? gracias.

      • Rumbo

        Solucionado. Gracias.

  • andrea

    hola, esta muy interesante tu tutorial lo implemente en una pagina que estoy realizando, cuando realizo el ensayo para ver si funciona, lo hace pero al momento de implementarlo en su totalidad no muestra los resultados para auto-completar pensé que era error de la bd o de la consulta pero ya comprobé que ese no es el problema Creo que es el css de jquery…que crees que podría ser …. gracias

  • louimaniako

    Funciono le modifique el limite y que solo mostrara las que empiesan con la letra que teclees, y solo un campo que era lo que necesitaba, borre el div resultado y solo deje el ajax.php e incluse le agrege mi clase de conexion lista para aceptar utf-8 y jalo de maravilla

  • Andres Clmb

    Muchas gracias, de lo mejor este tutorial!

    >para favoritos D;

  • Markatos

    me pase horas y horas leyendo tutoriales de jquery y
    no entendía nada, con estos videos ya cache algunas cosas

  • Giancarlo

    Buen dia javier, en el archivo ajax.php al llamar a la funcion buscarUsuario, le estas pasando un parametro $_GET['term`]. Como le pasas esa variable al archivo ajax.php

    • http://www.jvsoftware.com/ Javier Villanueva

      @e819eb3b53c4714b19005be43ce1ee22:disqus Hola, ese parametro lo pasa automaticamente el plugin de autocomplete desde el javascript

  • alex

    ME SIENTO FRUSTRADO HERMANO REPITO TODO TODOS LOS PASOS Y NO ME TRAE LOS DATO MIERDA ME SIENTO IDIOTA

  • Franco

    Me podrias decir que esta mal de esto?

    $(function() { $(‘#buscar_usuario’).autocomplete ({
    source : ['Jose', 'Luis', 'Maria'] });
    });

    Porque lo ejecuto y no pasa nada, no me muestra ningun resultado

  • Aaron

    hola que tal amigo, muy buen tutorial, sencillamente hermoso… ando diseñando una aplicacion lo que necesito es que cuando busque el nombre me llene automaticamente unos imputs de un formulario…ojala y puedas ayudarme…

    • robert

      hola estuve viendo este tutorial y etsa muy bueno, de ahi leyendo encontre tu mensaje, yo para que me aparezca en un input lo que hice fue esto:
      UserID:

      por poner un ejemplo, a mi me funciona……

  • Hugo Cesar Silva

    Buen día Javier.
    Estoy utilizando este código que mes de gran ayuda, pero al momento que lo pongo en mi hosting no me ejecuta, en mi servidor AppServ, funciona al 100 pero al pasarlo a mi hosting creo que no me reconoce la conexión.

    • http://www.jvsoftware.com/ Javier Villanueva

      Hola, que extraño revisa la consola y revisa si te muestra algun error alli, estas seguro que estas usando los datos de coneccion a la base de datos correctos? (usuario, contraseña, nombre de la base de datos, etc)

  • Karla Lopez

    Buenas tardes, estoy utilizando este ejemplo en una aplicación desarrollada en php, javascript, json, ajax con oracle… El codigo funciona correctamente si en source pongo los valores fijos, pero si lo quito y pongo source: ‘ajax.php’ deja de funcionar.. que pasara?

    • flako

      hola, a mi me pasa lo mismo con los valores fijos funciona, pero al cambiar por ajax.php no, y mi conexion a la base de datos es la correcta.

  • Álvaro Andres Salazar

    realmente genial !!! lobuscaba gracias por la solucion …

    tahito

  • http://www.facebook.com/rodry.rodriguez3 Rodry Rodriguez

    hola buen dia muy buen tutorial, solo tengo una duva como puedo imprimir varias veses sin que remplase, por decir imprimir una vez por el select y despues seleccion otra opcion y imprimirla tambien pero sin que se remplace ??????

  • carlos

    Javier excelente tutotrial solo tengo 2 problemas. 1 no me funciona lo siguiente $(‘#resultados’).slideDown(‘slow’, function(){$(‘#buscar_usuario’).val() = ‘ ‘;}); y como puedo mostrar un mensaje si no hay coincidencia con la db

    • http://www.facebook.com/rodry.rodriguez3 Rodry Rodriguez

      En donde haces la colsulta a la BD pones un
      if para verificar si ahy o no resultados yo lo harra asi, no se si sea la forma correta pero puede funcionar
      en el php
      “aqui iria tu consulta a la BD”

      IF(mysql_num_rows($Variableconsulta)){
      echo “resultados_encontrados”;
      }else{echo “no ay coincidencia”;}y en jquery con haces otro if

      if(html == resultados_encontrados){

      aqui pones lo que pase

      }
      else{
      alert(“no ay caincidencia en la BD”);
      }

      espero te sirva soy novato en esto
      xD

  • david

    Al fin…… Hace días que estoy bajando ejemplos y hasta ahora ninguno me había funcionado.
    Gracias por compartir.

  • Mr Dj

    Hola , excelente tutorial, tengo una duda, ¿que debo de hacer para que me complete palabra por palabra lo que voy escribiendo? Por ejemplo en tu ejercicio aparece asi: Si escribo “J” me aparece “Jose” pero cuando escribo “M” despues de haber escrito Jose no me da ninguna opcion para elegir y sabemos que tenemos el otro dato que es Maria, es por eso mi pregunta. Como el buscador de google que te completa palabra por palabra y no toda una oracion. ¿que debo de ponero quitar? Agredeceré que desees resolver mi pregunta.

  • Nivisaw

    DESDE HACE RATO QUERIA ESTUDIAR JQUERY PERO NO ENCONTRABA NADA BUENO EN ESPAÑOL Y ESTO ESTA FABULOSO =)

    EN EL PRIMER VIDEO HABLAS DE UNA CONEXION SEGURA, NOS PODRIAS AYUDAR DE UN EJEMPLO DE COMO HACER ESO.
    MUCHAS GRACIAS

  • Alvaro Hernandez

    Hola Javir, mi nombre es alvaro y te quería hacer una consulta, al momento de llenar el autocompletar, como puedes ocupar la variable seleccionada para generar un nuevo autocompletar, ya que por ejemplo, tengo un cliente que tiene muchas tiendas, entonces selecciono primero al cliente por un numero, luego me da el nombre y necesito tener en un select o otro autocompletar las sucursales que tiene este cliente …. ¿como lo podría hacer o utilizar?

  • http://www.facebook.com/pablillo.eduardo Pablillo Eduardo

    yo tengo problemas con las ñ me lo muestra bien pero cuando lo selecciono esto lo borra al instante es como si no me permitiera seleccionar y los demas si funciona unicamente con las ñ es el problema 

  • salinas

    hola tengo una consulta, espero me puedas ayudar.
    quise usar el mismo metodo para una aplicacion que estoy tratando de hacer, pero no me resulta, tambien probe de otras maneras y nada….

    bueno la consulta es la siguiente:
    tengo un script de php que se llama generacodigo.php, en este archivo se genera un codigo para un producto, este codigo se genera a partir del mas alto de los que ya estan en la base de datos, es decir si en la base de datos ya hay un codigo “I015″ el generacodigo.php me genera el codigo siguiente que seria “I016″, esto ya lo tengo resuelto, el problema es como hago para poner el codigo que me genera  en una caja de texto que tengo en otro archivo que seria inventario.php??

  • Marta Johnsson

    I have downloaded the source code and I have made a db om my host but it’s not working:-( any idea why?

  • Zc92

    Excelente Tutorial, se te agradece infinitamente me funciono a la perfeccion Gracias.!!

  • Alex_brazil07

     au que buenos videos gracias

  • Ricardo Jimenez

    javier hola como estas, mira me acabo de bajar tu demo y ya cambie la conexion y mi select, pero cuando ejecuto no pasa nada, no me aparece el autocompletado, me puedes ayudar porfavor gracias, de ante mano muchas gracias

    • Esteban Farez

      Hola Ricardo debes verificar la conexión de mysql y la parte de llamado a la base de datos este bien logeado, y ademas LIKE es la busqueda automatica por parte de %nombre% por parte del textbox

  • Felipe correa

    muy buenisimo el tutorial me sirvio bastante

  • Adolfo reyes
    • carlos

      encontraste la solucion tengo q hacer lo mismo

  • Josmel Diaz

    Eexcelentes videos javier..! continúa asi… me han gustado mucho tus videos

  • http://www.facebook.com/profile.php?id=653627386 Soroush Atarod

    hi, can you upload the code please. Because I tried it, it is not working

  • http://www.facebook.com/profile.php?id=653627386 Soroush Atarod

    hi, can you upload the code please. Because I tried it, it is not working

    • Fran

      The code is already on the video description :)

  • Tain

    Hola!
    Realmente me parece muy útil tu tutorial, estoy empezando a utilizar jquery y basándome en tu ejemplo quisiera que desapareciera el ítem de la izquierda una vez éste se haya arrastrado al carrito. Como podría acceder a ese elemento? Gracias de antemano!

    • javiervd

      Hola, creo que te refieres al tutorial de drag & drop? Si es asi lo unico que tienes que hacer es quitar el parametro helper : ‘clone’ de la funcion draggable, Saludos!

  • pepito88

       
           
           
           

           
                $(function(){
                    $(‘buscar_usuario’).autocomplete({
                        source : ['maria','carmela','fiorela']
                    });
                });
           
       
       
           
               
           
           
           
       

    //No me sale nada cuando inserto un valor en el textbox… :(

    • napsnavarro

      te falta el simbolo #  en el nombre del campo dentro de la funcion en el javascript

    • Ctj

      $(#’buscar_usuario’).autocomplete({
      Te falta un gatito aki!

      • Ctj

        Ups perdón:

        $(‘#buscar_usuario’).autocomplete({ 

        Ahi si…

  • Arasapy

    Javier como estás? tengo una consulta desde hace mucho, a ver que me comentas sobre esto:
    Como se puede implementar un autocomplete pero que solo acepte los itens que estén en la db? El tema viene de que si tengo un como box, pero que tiene muchas “opciones”, se vuelve difícil utilizarlo, pero si coloco un input el usuario podría cargar opciones que no están en la db. Es decir, implemento un input con autocomplete pero que también restrinja la carga o un como box con un autocomplete. Disculpa si no me doy a entender bien, pero es una duda que tengo desde hace tiempo y no se como encontrar la información ni siquiera en google.  Gracia desde ya.

  • Noblejas2005

     hola amigo acabo de encontrar tu web u ua no me despegare espero que sigas los videotutoriales y quiza nos puedas realizar una web de empleos clasificados gracias

  • Arasapy

    Hola Javier… tengo un tema que no puedo solucionar. He tratado de poner el autoCompletar en un formulario dinámico que lo que hace es ir agregando campos con un link (eso carga la variable en un array para luego subirlo a una db) para ello utilizo esta función:

    $(function(){
    var removeLink = ‘ remove‘;
    $(‘a.add’).relCopy({ append: removeLink});
    });

    Mi problema es, que el autoCompletado lo hace siempre en el 1º input, como le digo al auto completado que me vaya mostrando los resultados en los distintos inputs que se van creando? puedo usar la funcionalidad de “closest”? como sería? Muchas gracias desde ya

    *la funcion depende de un reCopy.js, no le he puesto aquí por ser muy largo. Lo bajé de un tutorial buscado de google: http://www.9lessons.info/2010/04/jquery-duplicate-field-form-submit-with.html

    • Anónimo

      Hola, si el problema es que estas bindeando el autocomplete cuando la pagina carga y no cada vez que creas un elemento nuevo, intenta modificando la funcion algo asi:

      $(function(){
      $(‘a.add’).live(‘click’, function(){
      var removeLink = ‘ remove’;
      $(this).relCopy({ append: removeLink});
      $(this).autocomplete({ //las opciones de tu autocomplete aqui })
      });
      });

      No lo he probado, pero en teoria deberia funcionar. Saludos!

  • Agustierrez

    Hola queria saber si tienes idea de como adaptar el tutorial para symfony
    Gracias

  • http://WWW.COMERCIOTACHIRA.COM gabino gomez

    buenos dias porque este me funciona perfecto ya lo adapte a mi pagina y en mozila funciona bien pero en internet explorer no que hay que hacer por favor

  • Wilder

    hola javier, muy buen tutorial. Pero he observado que cuando tengo varios usuarios aparecen todos desplayados pero imaginate que tenga mas de 100 resultados estos deberian estar limitados en su visualizacion mediante un scrollbar, como podria hacer eso ?

    • Wilder

      bueno ya lo logré. Tan solo hay que cambiar el css (jquery-ui-1.8.4.custom.css) por:
      .ui-autocomplete { height: 90px; overflow-y: scroll; overflow-x: hidden; }
      Esto permitira la presencia de un scrollbar.

  • johnB

    hola amigo, primeramente felicitarte por los tutoriales estan muy buenos.
    bueno tengo pequeño problema, el codigo que diste me funciona perfecto, pero como hago para solo capturar el id del usuario y ponerlo en un input de tipo hidden???. agradeceria bastante tu respuesta. te dejo parte del codigo que creo q falta agregarle algo:
    ——
    public function buscarEntidad($nombreEntidad){
    $datos = array();
    $sql= “SELECT nombre_entidad, codentidad
    FROM entidad WHERE nombre_entidad
    LIKE ‘%$nombreEntidad%’ LIMIT 8″;

    $resultado = mysql_query($sql);

    while ($row = mysql_fetch_array($resultado,MYSQL_ASSOC)){
    $datos[] = array(“value” => $row['nombre_entidad'],
    “identidad” => $row['codentidad'],
    );

    }
    return $datos;
    }
    —————————-

    $(function(){
    $(‘#buscarEntidad’).autocomplete({
    source : ‘clases/ajaxPersonas.php’

    });

    });

    • javiervd

      Hola amigo, puedes colocar el input vacio en un principio, y en la funcion de autocomplete, en la parte de “select” colocas:

      $(“#id_del_input”).val(ui.item.id_del_usuario);

      Utilizando los nombres correctos de los id, saludos.

      • johnB

        Buen dia amigo, gracias por tu respuesta, me funciono todo a la perfecion.

        Una sugerencia, no se si podrias colgar un tutorial para crear sesiones de inicio en un sistema y asi trabajar con ellas, creo que seria de mucha utilidad para todos. GRACIAS

  • albeolo

    que conste que también probé lo que decías más arriba:

  • albeolo

    $con = mysqli_connect(“xxx”, “xxx”, “xxx”, “xxx”);
    $term = trim($_GET['term']);
    $sql=mysqli_query($con, “SELECT * FROM clientes WHERE razonsocial like ‘%$term%’ OR nombrecomercial like ‘%$term%’”);

    $matches = array();
    $matriz= array();

    while($row = mysqli_fetch_array($sql)){
    $valorRazon= utf8_encode($row['razonsocial']);
    $valorComercial= utf8_encode($row['nombrecomercial']);

    $matriz['value'] = $valorRazon;
    $matriz['label'] = “{$row['codigo']}, {$valorRazon}, {$valorComercial}, {$term}”;
    $matches[] = $matriz;
    }
    $matches = array_slice($matches, 0, 5);
    print json_encode($matches);

  • albeolo

    Hola Javier, antes de nada te diré que he visto tus videos y eres un docente excepcional.
    Quisiera hacer dos preguntas:
    1).- como se implementaria en un combobox del autocomplete jquery ui el tema de acceder a la base de datos? en la página oficial lo hace con los valores estáticos de un select con sus option ya introducidos en el código html, y he intentado implementar manipulando el source: y no consigo, por más vueltas que estoy dando…

    2).- me sucede una cosa muy extraña con los acentos y la ñ en la base de datos: cuando tecleo una ñ en el input autocomplete, no selecciona nada, pero si lo pongo a huevo en el select …like ‘%ñ%’…, me saca los registros que contienen ñ. He puesto la variable get (term) que me aparezca añadidos de coletilla dentro de los datos que filtra, y si que aparece la ñ…

    mi código odiado:

    Muchas gracias. Un saludo.

    • javiervd

      Hola amigo,

      1) No entiendo muy bien, no es de esto que trata el tutorial?

      2) Que extraño, revisastes que el charset de la BD sea igual al que colocastes en el html?

      • Albeolo

        1).- Si, correcto, tu tutorial habla del autocomplete, pero yo te cuestiono por ampliarlo:

        http://jqueryui.com/demos/autocomplete/#combobox

        Utiliza un select con los option precargados, y mi cuestión es como recargarías estos select en el momento que se tecleen por ejemplo 3 caracteres, para que no tenga que cargar la tabla completa en el select de primeras…

        2).- Tenías razón, era cosa del charset (he tenido que elegir el latin1_spanish_ci, con el utf8… no me funcionaban las eñes o las mezclaba con las enes…

        Gracias de nuevo.

  • jorge

    caso resuelto si te digo te reirias de mi bueno te dire teni dos clases y jalaba la equibocada jejeje pero si era el error del $ gracias y disculpa las molestias

  • jorge

    fuera de eso ve algo mas es que me sigue marcando undefined y ya correji ese error jejeej de antemano gracias y disculap si cuaso molestias jejeje

  • jorge

    public function buscarUsuario($nombreUsuario){
    $datos=array();
    $sql=”select * from estudiante
    where nombre like ‘nombreUsuario%’
    or apellidopaterno like ‘nombreUsuario%’
    or apellidomaterno like ‘nombreUsuario%’”;
    $resultado= mysql_query ($sql);
    while ($row=mysql_fetch_array($resultado,MYSQL_ASSOC)){

    $datos[]= array(“value” => $row['nombre'].”.$row['apellidopaterno'].”.
    $row['apellidomaterno'],
    “registro” => $row['nombre']);
    }
    return $datos;
    }
    }

    • javiervd

      Creo que te falta el simbolo de $ en tu query, deberia ser `$nombreUsuario%`. Saludos.

  • jorge

    intente con todos los demas campos de mi tabla y nada me aparece indefined mi usuarios.class.php es el siguiente sera que tengo algun error ??
    $row['nombre'].”.$row['apellidopaterno'].”.
    $row['apellidomaterno'],
    “registro” => $row['registro_id']);
    }
    return $datos;
    }
    }

  • jorge

    estube porobando y creo ke el detalle es de la base de datos por que lo quise mostar en el div con un strong y me aparece indefined pero lo raro es que lo del auto complete si me aparece no se que pueda ser mi funcion ha de tener un detalle esta ahi arriba XD

  • jorge

    tendra algo que ver que el campo en la bd es int no creo vera jejeje

  • jorge

    no puedo poner mi input jejeje

  • jorge

  • jorge

    ya lo he probado y nada no me aparece nada en mi input el scrip me kedo asi

    $(function(){
    $(‘#buscar_usuario’).autocomplete({
    source: ‘ajax.php’,
    select : function (event,ui ){
    $(‘#registro’).val(ui.item.registro);
    }
    });
    });

    y mi input esta de la siguiente manera:

    la verdad no se que pueda ser

  • jorge

    hola se que talvez este ocupado pero espero me puedas ayudar me urge un poco ya que me he quedado atorado por esto de antemano gracias

    • javiervd

      Hola amigo, no es necesario el +, NaN significa Not a Number, este error sale cuando intentas hacer operaciones matematicas con strings o parecido, coloca el codigo asi:

      select : function (event,ui ){
      $(‘#id_registro’).val(ui.item.registro);
      }

      Deberia funcionar correctamente.

      Saludos.

  • jorge

    por lo visto me faltaba el + antes de ui,item,registro pero ahora me pone NAN en el input y no el valor ke yo kiero ke es el numero de registro del usuario ke podra ser

  • jorge

    haber si entendi lo deje de la manera siguiente pero no me muestra nada jeje disculpa soy nuevo en esto si pudieras ponerme un ejemplo de favor :
    $(function(){
    $(‘#buscar_usuario’).autocomplete({

    source: ‘ajax.php’,
    select : function (event,ui ){
    $(‘#id_registro’).val(
    /*”*/
    ui.item.registro);
    }
    });
    });
    es lo que yo entendi o como seria gracias de antemano

  • jorge

    Hola nuevamente preguntando lo anteriar ya me quedo eran detalles de sintaxis, ahora bien tengo un pequeño problema intente en el selectec poner un input y a este asignarle de valor un registro de la base de datos pero me sale undefined en si lo que queria realizar es que cuando se seleccione el nombre en lalista en el input se ponga el valir de id de usuario per no me pone nada el codigo es el siguiente:

    $(function(){
    $(‘#buscar_usuario’).autocomplete({

    source: ‘ajax.php’,
    select : function (event,ui ){
    $(‘#idoculto’).html(
    /*”*/
    ID_usuario: ‘ + ui.item.registro
    );
    }
    });
    });
    y la funcion es la siguienete:
    public function buscarUsuario($nombreUsuario){
    $datos=array();
    $sql=”select * from estudiante
    where nombre like ‘nombreUsuario%’
    or apellidopaterno like ‘nombreUsuario%’
    or apellidomaterno like ‘nombreUsuario%’”;
    $resultado= mysql_query ($sql);
    while ($row=mysql_fetch_array($resultado,MYSQL_ASSOC)){

    $datos[]= array(“registro”=>$row['registro_id'] ,”value”=> $row['nombre'].”.$row['apellidopaterno'].”.
    $row['apellidomaterno']);

    }
    return $datos;
    }

    • javiervd

      Hola amigo, si es un input no puedes usar la funcion “html” utiliza “$(‘#id_del_input’).val(‘texto’);” en su lugar y prueba. Saludos

  • jorge

    solo quiero el autocompletado esta bien lo que puse:
    $(function(){
    $(‘#buscar_usuario’).autocomplete({

    source: ‘ajax.php’
    }); });
    por otra parte no se si este correcto el array ya que quiero mostrar el nombre,apellidopaterno,apellidomaterno el codigo es el siguiente:
    public function buscarUsuario($nombreUsuario){
    $datos=array();
    echo “entra funcion”;
    $sql=”select * from estudiante
    where nombre like ‘nombreUsuario%’
    or apellidopaterno like ‘nombreUsuario%’
    or apellidomaterno like ‘nombreUsuario%’”;
    $resultado= mysql_query ($sql);
    while ($row=mysql_fetch_array($resultado,MYSQL_ASSOC)){
    $datos[]= array(“value”=> $row['nombre'].”.$row['apellidopaterno'].”.$row['apellidomaterno']);

    }
    return $datos;
    }
    el detalle es que no me muestra nada al momento abrirlo en mi explorador

  • jorge

    tengo una pregunta yo solo quiero el auto

  • Fer

    disculpa tengo un problema intento meterle la libreria ezsql pero mmm siento que estoy haciendo algo mal

    query = (“SELECT * FROM usuarios
    WHERE nombre_usuarios LIKE ‘%$nombreUsuario%’
    OR apellido_usuarios LIKE ‘%$nombreUsuario%’”);

    foreach ($resultado as $resultado) {

    $datos[] = array(“value” => $resultado->nombre_usuarios . ‘ ‘ .
    $resultado->apellido_usuarios,
    “descripcion” => $resultado->descripcion_usuarios,
    “foto” => $resultado->foto_usuarios);

    }
    }

    return $datos;
    }

    • Fer

      mmm se ve incompleto aqui te lo dejo espero me puedas ayudar
      http://tinypaste.com/18ca8

      • javiervd

        Hola amigo, por lo que veo tienes 2 errores en la parte donde haces el query tienes un signo de = de mas despues de la funcion “query” y en el foreach cambia en nombre de la 2da variable por ejemplo $resultado as $usuario y usa esta para llamar el nombre, apellido, etc.

      • Fer

        gracias ya quedo y buena suerte con los tutoriales son muy buenos

  • christian

    hola , tengo el mismo problema que mencionan de la base de datos, ya probe lo que explicas, y no me sale ningun error tampoco, ke solucion puede ser!!!

  • william

    haber viejo javi el video esta em em em em maso maso mas o menos exelente gracias tenia un lio de como solucionar ese problema el de como llamar datos. La locura gracias y si fuese posible no tendras de casualidad el codigo de la hoja de estilos q´ lo publicara o lo pasara, el del div.
    No siendo mas tampoco menos suertes q´ les digo jejejeje ofbua

  • Dario

    Buenisimo gracias

  • Dario

    Hola como estas una pregunta existe la forma de que el autocomplete busque por el principio de la palabra y no por el contenido de la palabra
    en php lo tengo asi: nombre LIKE ‘%$nombre_usuario%’
    Muchas Gracias
    Saludos

    • javiervd

      Hola pues si, el simbolo de % funciona como un comodin, si le quitas el primero va a buscar justo como necesitas, saludos.

  • dario

    Sos un Maestro!!
    funciono perfecta tu idea , Gracias por ayudarme una vez mas,de los errores uno aprende
    saludos

  • Dario

    si ui.item.articulo_imagen esta vacio,que haga otra cosa

    • javiervd

      Porque no haces asi, cuando guardes un usuario nuevo si no coloca la imagen guarda la ruta a la tuya, de esta manera este campo nunca estaria vacio y en jquery no tendrias que colocar ningun condicional, sino que siempre mostrarias la imagen.

  • Dario

    Ufa no salio el codigo
    Saludos

  • Dario

    Hola Javier todo bien?
    me surgio un inconveniente y no lo puedo solucionar
    estoy mostrando imagenes por medio de jquery y el autocomplete
    el problema es que quiero crear un condicional para que si el campo, que tiene la ruta, para mostrar la imagen esta vacia me muuestre otra imagen pero no puedo hacerlo desde puro php me salio pero con jquery se me esta complicando te dejo unas lineas de codigo a ver si se puede hacer algo
    Saludos y Muchas gracias
    ”+(aca funciona perfecto)
    ”(esto es lo que no me funciona)

  • javiervd

    El problema es que tuve que formatear hace poco y los tutoriales viejos ya no los tengo, puedes entrar directamente a la pagina ajax.php y pasarle algun valor a la variable term a ver si te muestra algo? por ejemplo http://localhost/miproyecto/ajax.php?term=test

  • http://notengo elias

    Javier ya probe con la consola y nada , no hay nada de mal en el codigo
    no se que sera, te puedes pasar tu cod_fuente para analizarlo.

    Ing. Torralba Elias

  • javiervd

    @anthony @elias que extraño, pueden probar con la consola de firebug a ver si les muestra algun error?

    @aranza Hola, solo debes colocar el mismo script pero cambiando el nombre del input y la tabla, puedes colocar tantos como quieras.

  • Aranza

    Disculpa una pregunta como haria para colocar el autocomplete a varios input de un formulario? con consultas a distintas tablas claro. Pls!!

  • http://notengo Elias Torralba

    Javier me paso lo mismo que con antthony

    e la siguiente linea de codigo
    realise el tutorial con tus mismo valores y palabras por cada sentencia , especificamente el error en mi caso esta aqui

    source: “ajax.php”

    al momento de probrar el codigo si complia ,no me coje los valores de mi BD

    espero pronta tu respuesta amigo.}

    atte. Ing.Torralba Elias

  • anthony

    hola javier, otra vez yo:D bueno gracias por tomarte el tiempo para ayudarme, bueno kiero dicirte q hice el cambio de parametro( de $_GET['buskedausuario'] a $_GET['term'] ), pero sigue igual y no se donde pueda estar el error porq no me lo muestra. espero tu respuesta
    y gracias de antemano .
    saludos

  • anthony

    hola javier, te felicito y te agradesco por el tutorial, te escribo tambien para pedirte tu ayuda con respecto al autocompletar, no se donde esta el problema.Funciona bien cuando trabajo con valores estaticos, el problema es cuando acceso a mi base de datos. Te dejo el codigo para q lo chekees y de antemano te doy las gracias:D. espero tu rpta.

    index.php

    $(document).ready(function(){
    $(“#buskedausuario”).autocomplete({
    source: “ajax.php”,
    select : function(event,ui){
    $(‘#resultados’).html(
    ‘Detalles de Alumnos’ +
    Nombre: ‘ + ui.item.value
    );
    }

    });
    });

    Autocompletar

    ajax.php

    BuscarAlumno_AutoCompletado($_GET['buskedausuario']));
    ?>

    usuario.php
    consulta=”select * from alumno where Nombre like ‘%$parametro%’”;
    $objcado= new cado();
    $resultado=$objcado->recuperaSQL($this->consulta);
    while($row=mysql_fetch_array($resultado, MYSQL_ASSOC)){
    echo $row['Nombre'].”";
    $datos[] = array(“value” => $row['Nombre'],”codigo” => $row['CodigoAl']);
    }
    return $datos;
    }
    }
    ?>

    cado.php

    link=mysql_connect(“localhost”,”root”,”");
    mysql_select_db(“taller”,$this->link);
    }
    function ejecutaSQL($consulta){
    $this->conectar();
    $resultado=mysql_query($consulta,$this->link);
    }
    function recuperaSQL($consulta){
    $this->conectar();
    $resultado=mysql_query($consulta,$this->link);
    return $resultado;
    }
    }
    ?>

    • javiervd

      Hola amigo, lo mas seguro es que sea esta linea:

      BuscarAlumno_AutoCompletado($_GET['buskedausuario']));

      Como mencioné en el video, el plugin envia la palabra que escribes en el parametro $_GET['term'], esto no lo puedes cambiar (a menos que te metas con el codigo fuente de jQuery UI), cambialo y prueba si te funciona.

      Saludos

  • Dario

    Hola javiervd Muchas gracias por la respuesta , sigo sin poder solucionar este tema hice exactamente lo que me indicaste pero no me funciona , lo estube probando asi $(‘#buscar_usuario’).val(“); y asi $(‘#buscar_usuario’).val(“”); y la verdad no tengo idea de como seguir.
    ¿podras Subir el codigo con esta linea agregada a algun lugar donde yo pueda verlo? porque realmente ya no se que hacer jajaja (seguramente por mi poca experiencia)
    Muchas gracias
    Saludos

    • javiervd

      Colocalo aproximadamente en la linea 54 de tu archivo index.php, de ambas maneras deberia funcionar sin problemas.

      • Dario

        Dale Gracias Lo sigo probando
        Saludos

  • Dario

    Bienisimo!!!
    te paso el link http://www.sincroniavirtual.com/dario.rar

    Muchas gracias

    • javiervd

      Hola amigo, acabo de probar el codigo, para lograr lo que necesitas solo coloca esta linea de codigo al final de la funcion ‘select’ del autocomplete (luego de que muestras la tabla con la informacion):

      $(‘#buscar_usuario’).val(”);

      Y listo, lo he probado y funciona perfectamente.

      Saludos.

  • Dario

    Hola javiervd tengo todo listo para enviartelo , a que mail te puedo enviar un archivo rar?
    Saludos Muchas gracias

    • javiervd

      Si puedes subelo a algun hosting como googlecode y deja el link por aca, asi tal vez alguien más te pueda ayudar tambien si por alguna razón no puedo.

  • Dario

    Hola como estas
    bueno, no pude hacer funcionar el codigo que me pasaste , seguramente estoy haciendo algo mal, y bueno , a partir de los tutoriales que pusiste tan gentilmente aprendi MUCHISIMO gracias a vos y no quisiera quedarme aca
    ¿te puedo enviar mi codigo para que lo mires y me digas como puedo hacer para que cuando encuentre una coincidencia y luego de presionar enter me retorne el foco al input del buscador pero limpio ?
    de nuevo MUCHAS GRACIAS POR TODO

    • javiervd

      Si puedes mandame un sql dump de tu tabla usuarios solamente, si tu codigo es igual al del tutorial puedo probar con el mio, pero como borre la BD que use para ese tutorial hace unos dias no he podido probar ultimamente.

  • Dario

    buenisimo lo pruebo y te comento
    Muchas gracias
    Saludos

  • Dario

    Hola como estas todo bien
    necesitaba saber si hay alguna funcion en jquery ui autocomplete para que despues de elejir una coincidencia y que me la haya cargado en el div, el imput se limpie con la busqueda que haya hecho , estube haciendo una funcion en javascript pero no me funciono tambien estube investigando por internet pero no hubo caso, vos que sos el maestro me podras decir si existe algo para hacer eso
    Muchas gracias

    • javiervd

      Hola dario, bueno en teoria creo que si colocas $(‘#id_del_input’).val() = ”; luego de que hayas cargado los datos deberia funcionar. Espero te sirva, saludos.

      • Dario

        Hola javiervd ante todo gracias por responder y por tu paciencia porque como habras notado soy novato y algunas cosas me cuesta entenderlas.Estube probando lo que me pusiste pero seguramente estoy haciendo algo mal , esa linea de codigo va aca $(‘#descripcion’) .autocomplete({selectFirst: true,source : ‘bus_art.php’,

        o aca select : function(event, ui){$(‘#resultados’).html( ACA
        o aca ACA
        Muy buenos los videos
        Saludos y muchas gracias

      • javiervd

        No hay problema, bueno siguiendo mi tutorial lo pudieras colocar en el callback del slideDown:

        $(‘#resultados’).slideDown(‘slow’, function(){ $(‘#input’).val() = ”; });

        Ya que para ese momento ya la información debe haberse mostrado completamente.

  • Dario

    Buenisimo Gracias otra vez
    Saludos!!!

  • Dario

    Hola como estas te molesto una vez mas, pero la opcion de autofill no se como agregarla a mi codigo serias tan amable de indicarme , por las dudas te paso el codigo , desde ya muchas gracias por tu tiempo.

    $(function(){
    $(‘#buscar_usuario’).autocomplete({
    source : ‘bus_usu.php’,

    select : function(event, ui){
    $(‘#resultados’).html(
    Telefono: ‘ + ui.item.foto + ” +
    Nombre: ‘ + ui.item.value + ” +
    Descripcion: ‘ + ui.item.descripcion ); } }); });

    Buscar Usuario

    • javiervd

      Lo que tienes que hacer es agregar el plugin a tu proyecto e incluirlo despues del jQuery UI, y en las opciones del autocomplete agrega autoFill : true, lo acabo de probar y funciona perfectamente, Saludos!

  • Dario

    Buenisimo gracias por tu ayuda , ya me pongo a probar todo
    Saludos

  • Dario

    Hola como estas todo bien, te molesto para hacerte una consulta mas, sigo con el tema de jquery y el autocompletado lo que necesito saber es si se puede hacer con jquery lo siguiente,cuando me encuentre una coincidencia en la base de datos se complete el div sin tener que seleccionar la coincidencia ni salir de foco , o sea a medida que estoy escribiendo me vaya generando el div con los resultados sin tener que seleccionar nada ni presionar enter
    Saludos Muchas gracias

    • javiervd

      Bueno si se puede hacer pero no es necesario el plugin de autocomplete, puedes crear una funcion de jQuery que se ejecute cada vez que se presiona alguna tecla en el input y que ejecute un query igual al que mostre en el tutorial, si consigue algun resultado pues que reemplace el contenido del input por el nombre del usuario. O aun mejor, pudieras probar la modificacion que hizo este usuario en el plugin de autocomplete:

      http://forum.jquery.com/topic/adding-an-autofill-option-and-anchored-filters-to-the-autocomplete-plugin

      Ya que agrego la opcion de “autofill” que es la que tu necesitas.

  • Dario

    si, gracias igual por contestar me di cuenta despues de haberte enviado el mensaje
    gracias de nuevo

  • Dario

    Hola como estas desde ya te agradezco por compartir tus conocimientos solamente necesitaria saber como hacer para limitar a 2 o a 10 las respuestas obtenidas
    muchas gracias
    Saludos desde Argentina

    • javiervd

      Hola Dario, bueno el autocomplete hasta donde sé no permite limitar los resultados como parte de sus opciones, lo que puedes hacer es modificar la sentencia SQL, por ejemplo:

      SELECT * FROM usuarios WHERE nombre_usuarios LIKE ‘luis’ LIMIT 0, 10

      De esta manera solo mostrarías 10 resultados en el autocompletar sin importar si hay más de 10 usuarios con el nombre ‘Luis’.

      • Dario

        Hola como estas gracias por responder tan rapido
        lo estoy probando pero directamente no me da ninguna respuesta
        este es la sentencia en donde llamo a los datos
        $sql = “SELECT * FROM usuarios WHERE nombre LIMIT 0, 2 LIKE ‘%$nombreUsuario% ‘ OR apellido LIMIT 0, 2 LIKE ‘%$nombreUsuario%’ “;
        MUchas gracias

      • javiervd

        La sentencia quedaria asi:

        $sql = “SELECT * FROM usuarios WHERE nombre LIKE ‘%$nombreUsuario%‘ OR apellido LIKE ‘%$nombreUsuario%’ LIMIT 0, 2 “;

        Tienes que colocar el LIMIT al final.

  • Matt

    Hola, muy bueno el tutorial!!

    A ver si me puedes ayudar con el tema de que el autocomplete no lista los datos registros que contienen un tílde o una “ñ” por ejemplo.

    La codificación de mi bd es utf-8

    Gracias!!

    • javiervd

      Hola Matt, estube revisando el codigo del tutorial y para que funcione con caracteres con tilde o ñ necesitas modificar el doctype:
      < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      Y meta:
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>

      Lo he probado y me ha funcionado sin problemas, intenta de esta manera y me haces saber!

      • Angel

        Hola, he seguido tu tutorial y fantástico, tengo el problema de la ñ, lo he usado con PHP y DB2, ¿en qué parte tengo que cambiar la codificación, en la clase, en el documento principal del formulario o en el que contiene el enlace con jQuery?.

        Gracias por todo

      • Edu

        Hola Javier. Añadiendo el meta tampoco me solucionaba el problema de las tildes, al final lo he solucionado del siguiente modo:

        En el bucle, aplicar el utf8_encode para cada $row obtenido del mysql_fetch_array. Ejemplo:

        utf8_encode($row['nombre_usuarios'])

        Saludos y enhorabuena por los tutoriales, son muy buenos.

  • Pedro

    Perdona no he visto el link de descarga.

    sorry….

  • Pedro

    Buenisimo, me gusta la forma de programar con las distintas tecnologias pero, deja un link con el codigo fuente.

    Gracias

  • Wiseratt

    mjuy bueno el tutorial, te felicito, solo falto que mostraras el contenido de la hoja de estilos, o prepara un tutorial para creacion de hojas de estilo simples, seria de gran ayuda para quien esta iniciandose!

    • javiervd

      Gracias, si habia pensado explicar tambien un poco las hojas de estilo porque utilicé algunas propiedades de CSS3 nuevas pero no quería que el video se alargara tanto. Despues que termine con este tutorial puedo hacer uno específico de CSS para complementarlo mejor.

      • jorge

        Hola tengo un pequeño problema lo que sucede es que hice todo tal cual el tutorial en  xhampp corriendo en windows de manera local  y todo funciona ,ahora el detalle es que al subirlo al servidor el cuel es linux-suse   no me funciona no me marca ningun error pero no retorna ningun resultado  obviamente cambie los datos de la conexion a la base de datos alguna idea de que podria ser?

Últimos Tutoriales

Testimonios

JV Software did a fantastic job converting a static site to WordPress. Best contractor I've worked with.
- Regan Wilders, United States
JV Software was very professional during all parts of our project and very quick with responses.
- Rob W., Canada