Caja de texto con opción de autocompletado utilizando PHP, MySQL y jQuery

El post del día de hoy es sobre la opción de autocompletar que podemos colocar en las cajas de texto de un formulario para que conforme el usuario vaya escribiendo la aparezcan sugerencias a partir de la información almacenada en una base de datos. Lo vamos a hacer utilizando el widget Autocomplete de jQueryUI, PHP para el código a ejecutarse en el servidor y MySQL como gestor de base de datos.

Ejemplo: Información alumno

El ejemplo consiste en lo siguiente: Tendremos un formulario HTML en el cual el usuario captura una matricula(con autocompletar), una vez  capturada la matricula la información del alumno se rellenará automáticamente.

Formulario HTML

El formulario tendrá 4 campos: matricula, nombre, paterno y materno.

<form>
   <label for="matricula">Matricula:</label>
   <input type="text" id="matricula" name="matricula" value=""/> <br/>
   <label for="nombre">Nombre:</label>
   <input type="text" id="nombre" name="nombre" value=""/> <br/>
   <label for="paterno">Paterno:</label>
   <input type="text" id="paterno" name="paterno" value=""/> <br/>
   <label for="materno">Materno:</label>
   <input type="text" id="materno" name="materno" value=""/>
</form>

jQuery

Lo primero que tenemos que hacer es incluir la libreria  jQuery y jQueryUI , las podemos descargar y enlazar de forma local o lo podemos hacer desde google. Tambien es necesario incluir el css del tema jQueryUI que se desea utilizar. Todo esto lo ponemos dentro de la etiqueta <head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link href="css/jqueryui.css" type="text/css" rel="stylesheet"/>

Posteriormente colocamos la declaración $(document).ready y agregamos el siguiente código.

$(document).ready(function(){
    $( "#matricula" ).autocomplete({
    	source: "buscaralumno.php",
    	minLength: 2
    });

    $("#matricula").focusout(function(){
    	$.ajax({
      	    url:'alumno.php',
    	    type:'POST',
    	    dataType:'json',
    	    data:{ matricula:$('#matricula').val()}
    	}).done(function(respuesta){
    	    $("#nombre").val(respuesta.nombre);
    	    $("#paterno").val(respuesta.paterno);
    	    $("#materno").val(respuesta.materno);
    	});
    });
});

En la primer parte agregamos al cuadro de texto matricula el widget autocomplet de jQuery UI y configuramos sus opciones:

  • source: Indica a partir de donde tomará la lista de valores que va a mostrar al usuario, en este ejemplo va a ser un archivo llamado buscaralumno.php el cual devolverá un arreglo json con los valores a mostrar.
  • minLength: Indica los caracteres mínimos que se tienen que capturar para que haga la petición al servidor y presente la lista.

La segunda parte consiste en solicitar al servidor los datos cuando la caja de texto matricula pierda el foco, una vez que esto pasa se hace una petición ajax que devolverá la información del alumno, los datos los va a devolver como json.

PHP

En el servidor vamos a tener 2 archivos PHP, el primero llamado buscaralumno.php que va a devolver la lista de matriculas y el segundo, alumno.php devolverá la informacion de un alumno en particular.

buscaralumno.php

Lo que hacemos es este archivo es almacenar en la variable matricula el dato que se va a buscar, dicho valor se obtiene de la variable global $_GET  con el nombre term, posteriormente se crea una conexión a la base de datos y se ejecuta la consulta que devolverá la lista de matriculas, las cuales se almacenan en un arreglo llamado matriculas, al final ese arreglo se pasa a json y se imprime para que regrese la respuesta.


$matricula = $_GET['term'];

$conexion = new mysqli('servidor','usuario','password','basedatos',3306);

$consulta = "SELECT matricula FROM tblalumno WHERE matricula LIKE '%$matricula%'";

$result = $conexion->query($consulta);

if($result->num_rows > 0){
    while($fila = $result->fetch_array()){
        $matriculas[] = $fila['matricula'];
    }
echo json_encode($matriculas);
}

alumno.php
En el archivo alumno.php tenemos el codigo que va a devolver la información del alumno en base a la matricula seleccionada, dicha matricula la recibimos mediante la variable global $_POST, se crea la conexión a la base de datos y se ejecuta la consulta. Posteriormente se agrega a la variable respuesta los datos del alumno y se imprime como json.


$matricula = $_POST['matricula'];
$conexion = new mysqli('servidor','usuario','password','basedatos',3306);
$consulta = "SELECT nombre,paterno,materno FROM tblalumno WHERE matricula = '$matricula'";
$result = $conexion->query($consulta);

$respuesta = new stdClass();
if($result->num_rows > 0){
    $fila = $result->fetch_array();
    $respuesta->nombre = $fila['nombre'];
    $respuesta->paterno = $fila['paterno'];
    $respuesta->materno = $fila['materno'];
}
echo json_encode($respuesta);

Eso es todo en el ejercicio del dia de hoy, si les fue de ayuda dejen sus comentarios, recomienden el blog y sigan practicando. Aqui les dejo el link de descarga.

download

81 comentarios en “Caja de texto con opción de autocompletado utilizando PHP, MySQL y jQuery”

  1. Gabriel Canepa dice:

    Funciona muy bien. El único problema es que si se desea escalar el proyecto e incluir varios formularios en la misma página hay que utilizar classes en vez de id’s.

    1. Hola yo lo quiero hecahar a andar pero con postgresql alguien podria ayudarme???

  2. Manuel dice:

    Muy bueno tus ejemplos, estoy tratando de hacer un ingreso de matriculas con pre requisitos, nota>11 usando PDO, tendras algun ejemplo, te lo agradeceria

  3. Lucio dice:

    No consigo hacerlo andar :/ Me da el autocompletar de la matricula pero luego no me muestra el nombre, ni materno, ni paterno

  4. FRANN dice:

    Hola amigos, que tal

    Primero felicitarte por el ejemplo, estoy usandolo para buscar un parametro en la base de datos la cosa es que me salen muchisimos resultados y me gustaria saber como se podria inluir un scroll a los resultados,

    A ver si alguien sabe como se podria hacer.

    Un saludo y de nuevo felicidades!!

    1. Purungo dice:

      En el css agrega overflow:auto; en la clase del div.

  5. Yamid Viloria Ortega dice:

    Alguien a podido hacerlo andar completamente?
    solo autocompleta la matricula, los demas campos quedan vacios.

    1. Ariel dice:

      no caigo donde hay que agregar el codigo este:
      data:{ matricula:$(‘#matricula’).val()}
      desde ya gracias!!!

      1. denker dice:

        Va dentro de una etiqueta script que puedes colocar dentro de head de la pagina.

        1. Ariel dice:

          gracias por tu respuesta, cada data entonces corresponde con cada campo a buscar? dentro de los paréntesis con val() irían los campos o comprendí mas, igualmente estoy comenzando a seguir un tutorial de este sitio desde cero, gracias otra vez….

          1. denker dice:

            en data pasas las variables que quieres enviar al servidor, esto se hace en pares nombre:valor en el ejemplo se envia mediante post la variable matricula matricula:$('#matricula').val().
            $('#matricula').val() lo que hace es obtener el valor del elemento html con id matricula

  6. Amigos yo tengo la solucion, no se llega a completar el nombre, paterno ni materno. Para ellos coloquen esto :
    data:{ matricula:$(‘#matricula’).val()}
    OJO FALTO .VAL
    CON ESTO TENGA SALE 🙂

    1. marco dice:

      Gracias amigo, ya me estaba dando desmadrugando mucho xD,

      gracias

    2. Jann dice:

      Gracias por dar ese dato, estaba busque y busque pero no pense que fuera algo tan simple lo que faltaba.
      Gracias

    3. jose dice:

      este codigo adonde va ??
      data:{ matricula:$(‘#matricula’).val()}

  7. Yamid Viloria Ortega dice:

    Lourdes te amo 😀

  8. geomorillo dice:

    exelente mas facil no puede ser usare tu ejemplo en un proyecto

  9. alex dice:

    gracias te pasastes , exitos ….. tengo una duda como haria para la palabra que busco en la lista se muestra automaticamente en otra caja de texto cuando le doy un clic y de NUEVO GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS EXITOS

    1. denker dice:

      Hola amigo, talvez podria ser con el evento focusout de jquery
      $("#caja").focusout(function(){
      $("#otracaja").val($("#caja").val());
      });

  10. Dimitri Acosta dice:

    ¿Cómo puedo hacer para poner 2 autocomplete en una misma página?
    En el caso de que desee hacer búsquedas por nombre o por matrícula.
    Siguiendo el ejemplo pude hacer una búsqueda por matrícula (que es el primer input que puse) pero por nombre (el segundo input) no me jala los resultados, la búsqueda se ejecuta bien pero no me despliega los resultados en el autocomplete.

    1. denker dice:

      Si deseas agregar otro autocomplete puedes agregar el siguiente código

      $( "#nombre" ).autocomplete({
      source: "buscaralumnopornombre.php",/* Busca los nombres del alumno
      minLength: 2
      });

      $("#nombre").focusout(function(){
      $.ajax({
      url:'alumno.php',
      type:'POST',
      dataType:'json',
      data:{ tipo:'nombre', dato:$('#nombre').val()}
      }).done(function(respuesta){
      $("#nombre").val(respuesta.nombre);
      $("#paterno").val(respuesta.paterno);
      $("#materno").val(respuesta.materno);
      });
      });

      solo tendrías que modificar el archivo alumno.php para que acepte el parámetro tipo y así de termine si la información se va a mostrar por matricula o nombre

      saludos

  11. Julio Ortiz dice:

    Lourdes eres la mera onda!!!!! Este ejemplo esta perfecto!!!!!!! Muchas gracias

  12. Marco Fuertes dice:

    Muy buen aporte!
    Me ha servido de mucho
    Tengo una pregunta, es la siguiente:
    Quiero meter mas autocomplete en un solo archivo (como 10), pero con diferente variable de la caja de texto, la busqueda la hace bien pero no jala los datos, ya intente una manera solo que creo no es la mas correcta
    Mi variable es clave articulo solo abreviada seria: clavea, clavea2, clavea3… clavea10

    $(document).ready(function(){
    $( “#clavea” ).autocomplete({
    source: “buscarclave.php”,
    minLength: 1
    });

    $(“#clavea”).focusout(function(){
    $.ajax({
    url:’clave.php’,
    type:’POST’,
    dataType:’json’,
    data:{ clavea:$(‘#clavea’).val()}
    }).done(function(respuesta){
    $(“#descripcion”).val(respuesta.descripcion);
    $(“#preunit”).val(respuesta.preunit);
    });
    });
    });

    $(document).ready(function(){
    $( “#clavea2” ).autocomplete({
    source: “buscarclave.php”,
    minLength: 1
    });

    $(“#clavea2”).focusout(function(){
    $.ajax({
    url:’clave.php’,
    type:’POST’,
    dataType:’json’,
    data:{ clavea2:$(‘#clavea2’).val()}
    }).done(function(respuesta2){
    $(“#descripcion2”).val(respuesta2.descripcion2);
    $(“#preunit2”).val(respuesta2.preunit2);
    });
    });
    });

    ¿Podrias decirme, como hacerle?
    ¿Que tengo que agregar en los otros archivos?
    Gracias!

    1. denker dice:

      El (document).ready no lo debes repetir, con una sola vez basta. Ahora si quieres manejar varios autocomplete necesitas tambien crear varios archivos php para que ahi busque la informacion del combo

      $( “#clavea2″ ).autocomplete({
      source: “buscarclave2.php”,
      minLength: 1
      });

      $(“#clavea2″).focusout(function(){
      $.ajax({
      url:’clave.php’,
      type:’POST’,
      dataType:’json’,
      data:{ clavea2:$(‘#clavea2′).val()}
      }).done(function(respuesta2){
      $(“#descripcion2″).val(respuesta2.descripcion2);
      $(“#preunit2″).val(respuesta2.preunit2);
      });

      1. Marco Fuertes dice:

        Muy bien, muchas gracias!
        La verdad no estoy muy familiarizado con jquery pero hago todo lo posible por tener la nocion y entenderle.
        De nuevo gracias por resolver mi duda, intentare hacerlo como tu me dices

  13. Frack3r dice:

    Buenisimo aporte, me sirvio mucho y fue muy sencillo de acoplar a mi proyecto.

    Gracias Mil

  14. Cristian dice:

    Hola, como haría para autocompletar un formulario, donde tengo que introducir tres parametros (anilla, criador, año). Cuando introduzca estos tres valores me muestre el resto del formulario

    Saludos y Gracias

  15. newie dice:

    Gracias Denker la explicación está genial.

  16. Isai dice:

    Después de varios días intentándolo, ¡lo logré! Hice funcionar este ejemplo en mi propio proyecto. TE DEBO BASTANTE. Lo ocupé en un proyecto para titularme. Ahora solo falta que me lo acepten jaja, pero en serio ¡¡¡¡te agradezco infinitamente!!!!

  17. abdon dice:

    hola amigo tendra la base de datos de este ejemplo , resien me estoy iniciando gracias de antemano

    1. denker dice:

      Hola amigo, solo es una tabla con 4 campos: matricula, nombre, paterno y materno

      Saludos

      1. abdon dice:

        gracias por el aporte

      2. Neustan dice:

        necesito su ayuda eh copiado y un poco modificado su consulta pero aun esta sin mostrarme los datos de autocompletado si me verifica cuantos usuarios tengo con el caracter similar de la consulta like pero no me llena el resto de los campos espero su respuesta

      3. Ana Laura Mora dice:

        Hola como ingreso esto $(document).ready en que parte debo poner alguna etiqueta? se coloca despues del formulario dentro del body? help me

        1. sun2012 dice:

          Dentro de las etiquetas de script antes de cerrar el head de preferencia, pero puede estar en cualquier parte del body. Saludos.

  18. Uriel dice:

    Todo luce muy claro, pero tampoco puedo hacerlo funcionar, ¿La tabla de la base de datos debe tener alguna característica en específico? (Yo también me voy iniciando en esto).

    Gracias de antemano.

  19. Armando dice:

    Por que al probarlo aparece rapidamente No search result??

  20. Jonathan dice:

    Hola Amigo, muy buen aporte ando en busca de un autocomplete para mi motor de reservaciones, solo tengo una pregunta espero me puedas ayudar, necesito hacer lo siguiente:

    Es un autocomplete de hoteles, aeropuertos, etc, hago la base de datos con la informacion y el autocomplete, solo me falta 1 cosa, yo no necesito que al seleccionar rellene otros campos, lo que necesito es que se seleccione y cuando le den en buscar al formulario mande esa “value” a una variable en php, me puedes ayudar como hacerlo??

    Ejemplo: autocompleta la palabra “Mexico” y al darle buscar “Mexico” su value en php es 3, quiero que el autocompletado aparezca mexico pero que envie “3” para recibir la variable en php, espero me explique.

    Muchas gracias

  21. Joaquín dice:

    He visto tu tutorial y me ha gustado, además de venirme muy bien para algo que quiero hacer, lo hice y no me funciona nada. Me gustaría que le echárais un vistazo, pues yo no consigo sacarlo, es el siguiente. En un formulario como el tutorial, tengo cuatro imput text, El formulario queda así:
    Nombre: Tipo: Dirección: Teléfono:
    Todos los datos están en una Base de Datos
    En lo correspondiente al código es el siguiente:

    $(document).ready(function(){
    $( “#nombre” ).autocomplete(
    “autocomplete.php”,
    {
    selectFirst: true,
    minLength: 1
    });
    $(“#nombre”).focusout(function(){
    $.ajax({
    url:’datos_generales.php’,
    type:’POST’,
    dataType:’json’,
    //datos del campo nombre obtenido con autocompletar
    data:{nombre:$(‘#nombre’).val()}
    }).done(function(respuesta){
    $(“#tipo”).val(respuesta.tipo);
    $(“#direc”).val(respuesta.direc);
    $(“#telefono”).val(respuesta.telefono);
    });
    });
    });

    El php datos_generales.php ante:

    echo json_encode($respuesta);
    y poniéndole a la consulta un nombre fijo:
    (//$nombre = $_POST[‘nombre’];
    $nombre=”Ulises”;)
    ejecutando directamente el archivo datos_generales.php me da lo siguiente:
    {“tipo”:”Bar”,”direc”:”Mariano Catalina, 8″,”telefono”:”969333333″}
    Por lo que el php en caso de recibir la variable nombre funciona. Lo que no me funciona es el que cuando hago focusout se me quedan vacíos los otros tres campos.
    Llevo dándole vueltas tres días y no se me ocurre que puede estar mal.
    Si a alguien se le ocurre algo le estaría muy agradecido.

  22. Josué dice:

    Saludos, y gracias por el ejemplo, definitivamente me sirvió mucho.

  23. Leopoldo dice:

    Hola Compañero gracias por el post, me a funcionado de maravila, tengo una consulta, si quiero que los datos se carguen cuando presiono enter que debo colocar, gracias de antemano!

    1. Joaquin dice:

      Cambiar el evento focusout por onkeypress que sirve para cuando presionas cualquier tecla.
      ……….
      $(“#nombre_comer”).focusout(function(){
      $.ajax({
      ………….
      por
      $(“#nombre_comer”).onkeypress(function(){
      $.ajax({

    2. javier dice:

      Amigo Leopoldo lo que realmente a mi me funciono fue agregar el evento keydown para que al dar enter se selecione.

      ……….
      $(“#nombre_comer”).focusout(function(){
      $.ajax({
      ………….
      por
      $(“#nombre_comer”)..keydown(function(){
      $.ajax({

      1. Joakin dice:

        El evento que dispara el código depende de lo que quieras hacer, en mi caso era clicar fuera de los combox para que me cargara los datos de un formulario,.
        y por cierto funciona muy bien. Si tu crees que funciona mejor con presionar una tecla, perfecto, a mi me parece más fácil hacer click con el ratón en cualquier parte de la página y que se carguen los datos que apretar una tecla.
        Gracias por tu correo,.

    3. javier dice:

      disculpa por el error es (.keydown)

  24. Orlando Gonzales dice:

    Bueno debo agradecerte por el aporte me ha ayudado mucho, bueno hoy les pido que puedan ayudarme con otro tema he tratado de de solucionar y no he podido se trata de que tengo que autollenar un campo select y un textarea, alguien sabe como hacerlo?

    .done(function(respuesta){
    $(“#tipodocumento”).val(respuesta.tipodocumento);
    $(“#nombre”).val(respuesta.nombre);
    $(“#paterno”).val(respuesta.paterno);
    $(“#materno”).val(respuesta.materno);
    $(“#nacimiento”).val(respuesta.nacimiento);
    $(“#genero”).val(respuesta.genero);
    $(“#pais”).val(respuesta.pais);
    $(“#email”).val(respuesta.email);
    $(“#observaciones”).val(respuesta.observaciones);
    $(“#imagendocumento”).val(respuesta.imagendocumento);
    $(“#talla”).val(respuesta.talla);
    }

    – PAS -> Pasaporte
    – DNI -> Documento nacional de identidad

    Cualquier ayuda se lo agradecere mucho

  25. JUAN dice:

    Como puedo hacer para que me retorne que el valor que ingrese no lo encontro por lo tanto no pueda seguir .. ya que el ejemplo me deja seguir de igual modo.

  26. Carolina dice:

    Hola, gracias por el código. Una pregunta: ¿cómo hacer para que solamente se muestren n sugerencias?. Por ejemplo en mi base de datos al escribir “Ro” me salen unas 150 sugerencias, pero solamente necesito que muestre 10 y así para cualquier caso

  27. Fernando dice:

    la información contenida en la base de datos contiene acentos y ñ, al consultar por ellos a través del autocompletado no aparecen, ayuda por favor….

    1. joakin dice:

      Para que te salgan los símbolos españoles tienes que tener las tablas en codificación utf8_spanish_ci y en el php mysql_query(“SET NAMES ‘UTF8′”);

      1. sun2012 dice:

        así es, saludos.

  28. Alex dice:

    Hola Para los que lo quieren hacer con SQL SERVER 2008 SERÍA ASÍ

    En la página

    $(document).ready(function(){
    $( "#proveedor" ).autocomplete({
    source: "clases/consulta-tercero.php",
    minLength: 2
    });

    $("#proveedor").focusout(function(){
    $.ajax({
    url:'clases/buscar-tercero.php',
    type:'POST',
    dataType:'json',
    data:{ proveedor:$('#proveedor').val()}
    }).done(function(respuesta){
    $("#nit").val(respuesta.nit);
    });
    });
    });

    Archivo consulta tercero.php


    getMessage()}')\n{$e}\n";
    }
    ## cerramos la conexion
    mssql_close($link);
    ?>

    Archivo buscar-tercero.php


    0){
    $fila = mssql_fetch_array($result);
    $respuesta->nit = $fila['nit'];
    }
    echo json_encode($respuesta);
    ?>

    Se debe cambiar las consultas a lo que se rquiera, muchas gracias, con este tutorial aprendí varias cosas que no sabía.

  29. Alex dice:

    Creo que no quedo bien en el post pasado

    Hola Para los que lo quieren hacer con SQL SERVER 2008 SERÍA ASÍ

    En la página

    $(document).ready(function(){
    $( “#proveedor” ).autocomplete({
    source: “clases/consulta-tercero.php”,
    minLength: 2
    });

    $(“#proveedor”).focusout(function(){
    $.ajax({
    url:’clases/buscar-tercero.php’,
    type:’POST’,
    dataType:’json’,
    data:{ proveedor:$(‘#proveedor’).val()}
    }).done(function(respuesta){
    $(“#nit”).val(respuesta.nit);
    });
    });
    });

    Archivo consulta tercero.php

    getMessage()}’)\n{$e}\n”;
    }
    ## cerramos la conexion
    mssql_close($link);
    ?>

    Archivo buscar-tercero.php

    0){
    $fila = mssql_fetch_array($result);
    $respuesta->nit = $fila[‘nit’];
    }
    echo json_encode($respuesta);
    ?>

  30. alcides melgarejo dice:

    hola no pude hacerlo funcionar a pesar de seguir correctamente los pasos me trae los datos de matricula y puedo seleccionar pero cuando salgo del cuadro los otros quedan en blanco

  31. laura dice:

    Hola … me funciona chevere . Como puedo hacer cuando tengo varias filas:
    REALIZADOS ASI:

    <?php for ($i = 1; $i
    Codigo Producto:<input type="text" id="codprod” name=”codprod” size=”8″ value=””/>
    Descripcion:<input type="text" id="desprod” name=”desprod” value=”” size=”50″/>
    Cantidad:<input type="number" id="cantpublic" name="cantpublic” size=”1″ min=”1″ max=”30″ >

    QUE DEBO CAMBIAR EN MI SCRIPT PARA QUE FUNCIONE

  32. enrique dice:

    where the database is?

  33. Miguel dice:

    Saludos!

    Aun no logro resolver que aparezcan palabras con acentos.

  34. roman dice:

    hola muy bien gracias por tu aporte quedo genial tenia días queriendo resolver el auto complementado pero necesito ayuda por que cada ves que pongo la matricula aun que si llena los demás campos me pone siempre “No search result” ayuda no quiero que aparesca ese mensaje

  35. Beto dice:

    hola, he logrado adecuarlo a un proyecto que te nia, y me funciona correctamente, ahora mi curiosidad es como hacer un efecto de LOAD al terminar de poner la matricula (mientras se hace la consulta sql)?…

    Por favor alquien que me ayude!, estare eternamente agradecido, gracias!

  36. Jossmiht dice:

    Buenas muy buen ejemplo y tutorial de un autocompletar con paplablas clave, yo tengo un problema que necesito autocompletar por nombre pero a veces hay nombre repetidos y necesito extraer el codigo antes de hacer el focusout para preguntar por el codigo y no por el nombre

  37. edu dice:

    Necesito agregar mas campos en el index.php, estaré muy agradecido por su ayuda

  38. Neybran dice:

    hola buenas tardes yo tengo un autocompetar realizado con jquery iu, necesito es saber como hago para uqe cuando el usuario escoja la opcion lo embia a una pagina llamado consulta.php gracias

  39. Karen dice:

    Hola muy buen aporte,soy nueva en este tema y quisiera saber como puedo hacer si quisiera tener dos cajas de texto y ambas tengan el mismo autocomplete,lo he hecho pero el primero toma el valor de la segunda???ayuda

  40. Miguel Cadillo Bolivar dice:

    Estimados, ¿si en mi base de datos tengo datos con acentos y cuando escribo en la caja de Texto el mismo dato pero sin acento con este procedimiento lo jala de todas formas? Tengo uno hecho también con jquery pero cuando busco escribo el datos sin el acento no se autocompleta.

  41. Hola, como puedo hacer para utilizar el autocomplete en un Text area? 🙂

    1. sun2012 dice:

      No creo saludos.

  42. Miguel Cadillo Bolivar dice:

    Alguien me puede confirmar si con este método cuando busco una palabra sin acentos igual me muestra los datos de la Base de Datos aunque estos si tengan acentos?

    Si en la base de datos tengo la palabra “Confirmación” y busco “Confirmacio” igual me los va a mostrar?

  43. Eduardo dice:

    amigo intente hacerlo pero no me funciona, cuando selecciono la matricula la pagina se traba y luego marcar error de pagina, podria ser por las librerias ?

  44. EXELENTE AMIGO, YA ME AUTOCOMPLETA PERO MI PREGUNTA ES COMO HAGO PARA LLENAR EL VALUE=”” DE LOS CAMPOS Y ASI INSERTARLOS EN LA BASE DE DATOS gracias

  45. Vicente dice:

    Me podrian ayudar ami no me sale! ningun dato..AYUDA

    $(document).ready(function(){
    $( “#matricula” ).autocomplete({
    source:”buscaralumno.php”;
    minLength: 2;
    });

    $(“#matricula”).focusout(function(){
    $.ajax({
    url:’alumno.php’;
    type:’POST’;
    dataType:’json’;
    data:{ matricula:$(‘#matricula’).val()}
    }).done(function(respuesta){
    $(“#nombre”).val(respuesta.nombre);
    $(“#paterno”).val(respuesta.paterno);
    $(“#materno”).val(respuesta.materno);
    });
    });
    });

  46. Buenas noches amigo, a mi no me esta funcionando el procedimiento, claro lo estoy adaptando en mi sistema, lo estoy aplicando en la cedula de clientes q tengo registrado ya.

    Mi pregunta es en el archivo buscaralumnos.php sale en la primera linea este codigo $matricula = $_GET[‘term’];

    mi pregunta es esa palabra term?? de donde proviene??? que esta tomando??? gracias saludos

    1. sun2012 dice:

      Hola pues term es una valor que viene por get, por ejemplo buscar.php?term=micedula y tendría el valor de micedula, solo que no se ve en la barra del navegador ya que jquery se encarga de mandar el valor por ajax.

  47. y la base de datos?dejas todo a la mitad

    1. sun2012 dice:

      Hola. La tabla se llama tblalumno y sus campos son matricula que es la llave primaria y unica, luego nombre, materno y paterno de tipo varchar, con las consultas puedes armar facil la tabla o si ya tienes una base y quieres probarlo solo cambias los valores de la consulta. Saludos.

  48. hola!!!
    alguien me podria ayudar lo necesito pero para postgresql

  49. dany dice:

    hola todo anda de maravilla pero si quiero que en ese campo del input text donde se busca por id de matricula pueda mostrar como por ejempo datos parecidos como un combo ose si yo escribo 2 q me muestre resultados parecidos osea 2, 12,20,22,42,32,62 y de ahi selecciono uno y ya se autocompleta los demas…..por favorr

    1. dany dice:

      perdon ya lo resolvi habia q poner 1 en minlength eso nomas era

  50. dany dice:

    hola mas bien si tengo una consulta como haria para que el autocompletado no solamente salga el numero de matricula sino digamos algo asi 1 – juan rodriguez rodriguez osea que salga la matricula guion nombre y apellido y al momento de buscar que no solamente busque por matricula sino por nombre y apellido a la vez

  51. maria dice:

    He investiga un poco sobre el autocomplete que efectivamente permita hacer consultas a una BD y por lo que e investigado tu código es genial , solo que lamentablemente debo usar en lugar de php coldfusion , tu sabrías como manejarlo en este lenguaje?

  52. 2dammalta dice:

    Buenas, me gustaria saber como puedo cambiar el tamaño de la ventana que sale cuando vas a autorellenar para hacerla mas pequeña y meterle un scrollbar para hacer la pagina mas compacta. Gracias.
    Saludos.

  53. Jota dice:

    COMO HAGO PARA AUTOCOMPLETAR, ES DECIR QUE CUANDO COLOQUE LA MATRICULA ME MUESTRE EL NOMBRE, APELLIDO PATERNO Y APELLIDO MATERNO PRESIONANDO UN BOTON DE CONSULTAR. NO SE SI ME EXPLICO!!! NECESITO UNA RESPUESTA URGENTEEE PORFAVOR…

Deja un comentario