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.

Ver demo Descargar

Autor
Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (29 votos, promedio: 4,38 de 5)
Cargando…
Comparte en las redes sociales

91 respuestas a “Autocompletar campo con jQuery, Ajax y PHP”

  1. Alberto dice:

    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..

    • Jose Aguilar dice:

      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);

  2. jose dice:

    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

  3. Juan Pablo dice:

    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

  4. Gero Fong dice:

    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.

    • Jose Aguilar dice:

      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

      • Gero Fong dice:

        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

        • Gero Fong dice:

          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

        • ricardo dice:

          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?

    • matias dice:

      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);
      });
      }
      });
      });
      });

    • Verónica dice:

      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.

  5. Gabriel dice:

    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.

  6. Rafa dice:

    ¿Que version de JQuery hay que usar? ya lo intenté y no me da el listado de registros para seleccionar 🙁

    • Jose Aguilar dice:

      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.

      • ricardo dice:

        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

  7. Paul Horna dice:

    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 🙂 ..

  8. Paul Horna dice:

    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 🙂 ..

  9. Joaquin dice:

    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! 😉

  10. Carol dice:

    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.

    • Rodrigo dice:

      Haz un “do-while” 😉

      • Victorio dice:

        Hola Rodrigo, se que ha pasado mucho tiempo de esta respuesta, pero podrías explicarme un poco lo del do-while????

        • Alberto Fernandez dice:

          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.

          • Jose Aguilar dice:

            Ok, también funciona de esa forma, aplicado al ejemplo, gracias por la aportación.

  11. Ronald Viveros dice:

    Muchas gracias por el tutorial me sirvio bastante saludos desde colombia

  12. Fidel Rodríguez Hernández dice:

    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

  13. Danny Alvarez dice:

    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

  14. eder dice:

    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

  15. Diego Corbinaud dice:

    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.

  16. thiago dice:

    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

  17. lucas dice:

    Muy bueno jose! muchisimas gracias anda perfecto con algun retoque simplemente.
    Te felicito!

  18. Bogdan dice:

    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.

  19. 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.

  20. Mauricio dice:

    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.

    • Jose Aguilar dice:

      El archivo config.php es tan solo para conectar con la base de datos.

      < ?php $conexion = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD); mysql_select_db(DB_DATABASE, $conexion); ?>

  21. José Luis Pérez dice:

    Excelente aporte me funcionó al toque

  22. José López dice:

    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.

    • José López dice:

      Cambié “$(‘.suggest-element’).live(‘click’, function(){” por
      “$(‘.suggest-element’).click(function(){” y ya funciona

  23. Enric dice:

    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

  24. Enric dice:

    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.

  25. Enric dice:

    jose, ya nada,, ya lo arregle

  26. Fernando dice:

    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!

  27. Fernando dice:

    2- El echo del archivo php tiene una referencia incorrecta en el DIV:
    ‘.utf8_encode($row_services[‘title’]).’‘;
    por
    ‘.utf8_encode($row_services[‘title’]).’‘;

  28. Fernando dice:

    No sale el cambio de la segunda parte que mencione, pero seria cambiar el DIV class=”suggest-element” a DIV <a class="suggest-element"

  29. Rebeca dice:

    Excelente!!! muchas gracias 😀
    Me has ayudado como no tienes idea 🙂

  30. cristhian dice:

    quisiera pasar dos parametros post

    • Jose Aguilar dice:

      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

  31. wilfor dice:

    excelente aporte solo hay que acoplarlo a lo que uno necesita gracias

  32. sebastian dice:

    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.

  33. david dice:

    donde puedo descargar el codigo

  34. Hugo dice:

    El ejemplo funciona perfectamente, pero no he podido hacer que funcione, ¿Podrían facilitarme el código?

    • Jose Aguilar dice:

      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

  35. Oscar dice:

    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!

    • Jose Aguilar dice:

      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

  36. Luis Fernando Huerta dice:

    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

  37. Micaela dice:

    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

    • Jose Aguilar dice:

      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 (

      ) y darle formato css a este para que flote y tenga un ancho establecido.

      Saludos

  38. Miguel Angel Díaz López dice:

    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

    • Jose Aguilar dice:

      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.

    • Chucho dice:

      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…

  39. Hely dice:

    Bravo por el tutorial.
    Acabo de implementarlo en mi pagina: http://paginas-amarillas.avisus.net
    He modificado el CSS para resaltar el termino buscado.

  40. Jose Mujica dice:

    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

  41. David dice:

    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

  42. David dice:

    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

  43. MAURO ARIAS dice:

    solucion cambien la class=”suggest-element”.
    saquenla del div y la colocan en

  44. omar ceja dice:

    Excelente post, como podria hacerle para que solo seleccione alguna de las sugerencias y no la nueva entrada que haya escrito

  45. Ana Laura Mora dice:

    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

    • Jose Aguilar dice:

      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

  46. Cristian dice:

    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!

  47. omar ceja dice:

    como valido, para que el usuario solo ingrese un valor del autocomplete.php

  48. QuecosasLeo dice:

    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/

  49. Chucho dice:

    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,…

    • Jose Aguilar dice:

      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

      • Chucho dice:

        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

  50. Cristina Navarrete dice:

    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.

  51. Cristina Navarrete dice:

    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.

  52. Marcelo Henriquez dice:

    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.

  53. Sergio Mina dice:

    y para limpiar el select una vez enviado el formulario ?
    aun no logro hacerlo….

  54. Javier Fabela dice:

    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);
    });
    },

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre