Búsqueda instantánea con AJAX, PHP y MySQL

Hoy traigo un tutorial donde mostraré una manera de obtener y mostrar datos de una base de datos MySQL con PHP y AJAX sin necesidad de recargar la página. En la búsqueda haremos una consulta a la BBDD para que sea case-insensitive y pueda concatenar varias columnas.

Ejemplo del resultado y sus peticiones al servidor

¿Cómo crear una búsqueda instantánea?

Esta vez haré el desarrollo en local, por cuestiones de comodidad. Utilizaré XAMPP (Apache y MySQL con PHPMyAdmin) en Windows.

1 de 5: HTML

Lo primero que necesitamos es “un lienzo en blanco” en PHP, al cual llamaremos index.php (por ejemplo).

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>

<body>
</body>
</html>

Después agregamos un formulario que acepte UTF-8 y con método POST. En el form debe haber un input del tipo texto (o búsqueda (search)) con nombre e ID “busqueda”. Opcionalmente se le puede añadir un valor y placeholder vacío, un máximo de 30 caracteres y el auto-completado apagado, además de un texto arriba del formulario.

Debajo de este vamos a crear un contenedor donde se muestren los resultados de la búsqueda:

<form accept-charset="utf-8" method="POST">
<input type="text" name="busqueda" id="busqueda" value="" placeholder="" maxlength="30" autocomplete="off" />
</form>
<div id="resultadoBusqueda"></div>

2 de 5: jQuery

A continuación hay que agregar la librería de jQuery en el head del HTML para poder usar la función POST. Yo utilizaré la versión 1.9.1 minificada que tengo descargada.

<script src="js/jquery-1.9.1.min.js"></script>

Ahora debemos crear una función, donde habrá una variable que sea el valor del input en el formulario. Yo llamaré a la función buscar.

<script>
function buscar() {
    var textoBusqueda = $("input#busqueda").val();
};
</script>

Entonces creamos una condicional donde, si el input está vacío, no haga nada (o sea, que no modifique el contenedor resultadoBusqueda)  y, sino está vacío el input, la función POST de jQuery mostrará el resultado. Esta función toma los datos de la siguiente forma:

$.post( url [, data ] [, success ] [, dataType ] )

Puedes obtener más información al respecto desde la web oficial de jQuery (inglés).

Así que la función es la siguiente:

<script>
function buscar() {
    var textoBusqueda = $("input#busqueda").val();
	
    if (textoBusqueda != "") {
        $.post("buscar.php", {valorBusqueda: textoBusqueda}, function(mensaje) {
            $("#resultadoBusqueda").html(mensaje);
        }); 
    } else { 
        ("#resultadoBusqueda").html('');
	};
};
</script>

La estructura del $.post de jQuery en esas líneas funciona de la siguiente manera:

  1. “buscar.php” -> Toma la URL donde estará el PHP que va a devolver los resultados de la consulta a MySQL (eso lo haremos un poco más adelante).
  2. valorBusqueda: textoBusqueda -> Donde “valorBusqueda” es el nombre del POST que le daremos en PHP ( $_POST[‘valorBusqueda’] ) para obtener lo que hay en “textoBusqueda”, que es el ID del input en el formulario.
  3. function(mensaje) -> Crea una función que devolverá el mensaje (el cual no será más que un echo de PHP) en el contenedor con un ID resultadoBusqueda (es decir: success).
  4. $(“#resultadoBusqueda”).html(mensaje) -> En el contenedor resultadoBusqueda se mostrará ese echo en PHP.

Para mostrar un mensaje en el contenedor resultadoBusqueda CUANDO SE VACÍE EL INPUT solo hay que modificar la siguiente linea del script:

$("#resultadoBusqueda").html('');

Y poner esto (por ejemplo):

$("#resultadoBusqueda").html('<p>JQUERY VACIO</p>');

Para que cuando cargue la página por primera vez (en cada visita) muestre un mensaje en el contenedor, debemos declarar que, cuando el documento haya cargado (y esté listo), mostrará un mensaje usando el método HTML de jQuery.

$(document).ready(function() {
    $("#resultadoBusqueda").html('<p>JQUERY VACIO</p>');
});

Por lo tanto, el script final sería algo como esto:

<script>
$(document).ready(function() {
    $("#resultadoBusqueda").html('<p>JQUERY VACIO</p>');
});

function buscar() {
    var textoBusqueda = $("input#busqueda").val();
 
     if (textoBusqueda != "") {
        $.post("buscar.php", {valorBusqueda: textoBusqueda}, function(mensaje) {
            $("#resultadoBusqueda").html(mensaje);
         }); 
     } else { 
        $("#resultadoBusqueda").html('<p>JQUERY VACIO</p>');
        };
};
</script>

Opcionalmente podríamos usar los métodos de callback de jQuery, como .done.fail, o incluso console.log, dentro del $.post para informar al cliente del estado de la petición.

No utilizamos el evento .submit porque lo que queremos es que muestre los resultados al escribir, sin tener que pulsar enter ni ningún botón.

En su lugar, para que el script obtenga los datos al escribir, debemos añadirle a nuestro input el evento onKeyUp de Javascript, el cual ejecutará la función buscar.

<input type="text" name="busqueda" id="busqueda" value="" placeholder="" maxlength="30" autocomplete="off" onKeyUp="buscar();" />
3 de 5: MySQL

En este ejemplo tengo una base de datos llamada mmv con cotejamiento utf8_spanish_ci. Dentro tengo una tabla llamada mmv001 que tiene cuatro columnas con el mismo cotejamiento. El motor de almacenamiento es InnoDB.

  1. id -> INT(5) -> UNIQUE -> A_I
  2. nombre -> VARCHAR(30)
  3. apellido -> VARCHAR(30)
  4. edad -> INT(2)

Es conveniente que el máximo de caracteres en el input del formulario sea de el mismo valor que una de las columnas (nombre o apellido en este caso) de la BBDD.

4 de 5: PHP

Ahora viene la parte interesante. Lo primero que debemos hacer es crear un archivo llamado buscar.php (o cualquiera que sea el nombre que hayamos puesto en la URL del $.post de jQuery).

El archivo debe estar totalmente vacío. Las etiquetas HTML (doctype, html, head, body, etc.) que puedan generar algunos editores de texto (como Dreamweaver) deben ser eliminadas.

Entonces le decimos al documento que vamos a escribir PHP y requerimos nuestro archivo de conexión a la BBDD.

<?php
//Archivo de conexión a la base de datos
require('conexion.php');
?>

Después es conveniente crear una variable que almacene la información que se enviará desde index.php con POST. Yo la llamaré consultaBusqueda.

<?php
//Archivo de conexión a la base de datos
require('conexion.php');

//Variable de búsqueda
$consultaBusqueda = $_POST['valorBusqueda'];
?>

Nota: valorBusqueda debe ser el nombre que hayamos puesto en jQuery. {valorBusqueda: textoBusqueda}

A continuación realizamos un filtro anti-XSS. Yo lo hago de la siguiente manera:

//Filtro anti-XSS
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

Nota: En $caracteres_buenos debes unir los ampersand (&) con los caracteres que vienen después, o no funcionará.

Una vez tenemos esto, creamos la variable que mostrará el contenido. La generamos vacía para evitar más adelante los E_NOTICE diciendo que no hemos establecido un valor para esa variable.

<?php
//Archivo de conexión a la base de datos
require('conexion.php');

//Variable de búsqueda
$consultaBusqueda = $_POST['valorBusqueda'];

//Filtro anti-XSS
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

//Variable vacía (para evitar los E_NOTICE)
$mensaje = "";
?>

Ahora es cuando comprobamos si $consultaBusqueda tiene algún parámetro. Si la variable está “seteada“, entonces procedemos a realizar la consulta a MySQL. Yo lo haré con estilo de procedimientos, pero no debería haber problema al hacerlo orientado a objetos.

<?php
//Archivo de conexión a la base de datos
require('conexion.php');

//Variable de búsqueda
$consultaBusqueda = $_POST['valorBusqueda'];

//Filtro anti-XSS
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

//Variable vacía (para evitar los E_NOTICE)
$mensaje = "";

//Comprueba si $consultaBusqueda está seteado
if (isset($consultaBusqueda)) {

	//Selecciona todo de la tabla mmv001 
	//donde el nombre sea igual a $consultaBusqueda, 
	//o el apellido sea igual a $consultaBusqueda, 
	//o $consultaBusqueda sea igual a nombre + (espacio) + apellido
	$consulta = mysqli_query($conexion, "SELECT * FROM mmv001
	WHERE nombre COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%' 
	OR apellido COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
	OR CONCAT(nombre,' ',apellido) COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
	");

};
?>

Ahora vamos a obtener la cantidad de filas que devuelve la consulta para después hacer una condicional donde, si es igual a cero es porque no hay registros con esos datos (lo escrito en el input), y sino, muestra los datos en un bucle while. Por último, hacemos un echo de $mensaje y listo.

<?php
//Archivo de conexión a la base de datos
require('conexion.php');

//Variable de búsqueda
$consultaBusqueda = $_POST['valorBusqueda'];

//Filtro anti-XSS
$caracteres_malos = array("<", ">", "\"", "'", "/", "<", ">", "'", "/");
$caracteres_buenos = array("& lt;", "& gt;", "& quot;", "& #x27;", "& #x2F;", "& #060;", "& #062;", "& #039;", "& #047;");
$consultaBusqueda = str_replace($caracteres_malos, $caracteres_buenos, $consultaBusqueda);

//Variable vacía (para evitar los E_NOTICE)
$mensaje = "";


//Comprueba si $consultaBusqueda está seteado
if (isset($consultaBusqueda)) {

	//Selecciona todo de la tabla mmv001 
	//donde el nombre sea igual a $consultaBusqueda, 
	//o el apellido sea igual a $consultaBusqueda, 
	//o $consultaBusqueda sea igual a nombre + (espacio) + apellido
	$consulta = mysqli_query($conexion, "SELECT * FROM mmv001
	WHERE nombre COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%' 
	OR apellido COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
	OR CONCAT(nombre,' ',apellido) COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'
	");

	//Obtiene la cantidad de filas que hay en la consulta
	$filas = mysqli_num_rows($consulta);

	//Si no existe ninguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
	if ($filas === 0) {
		$mensaje = "<p>No hay ningún usuario con ese nombre y/o apellido</p>";
	} else {
		//Si existe alguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
		echo 'Resultados para <strong>'.$consultaBusqueda.'</strong>';

		//La variable $resultado contiene el array que se genera en la consulta, así que obtenemos los datos y los mostramos en un bucle
		while($resultados = mysqli_fetch_array($consulta)) {
			$nombre = $resultados['nombre'];
			$apellido = $resultados['apellido'];
			$edad = $resultados['edad'];

			//Output
			$mensaje .= '
			<p>
			<strong>Nombre:</strong> ' . $nombre . '<br>
			<strong>Apellido:</strong> ' . $apellido . '<br>
			<strong>Edad:</strong> ' . $edad . '<br>
			</p>';

		};//Fin while $resultados

	}; //Fin else $filas

};//Fin isset $consultaBusqueda

//Devolvemos el mensaje que tomará jQuery
echo $mensaje;
?>
5 de 5: Ejemplos

Una vez hecho todo lo anterior, podemos observar los resultados finales. Yo no lo he aplicado ningún estilo, pero se puede hacer sin problemas.

Donde el ID "resultadoBusqueda" está definido en jQuery como "JQUERY VACIO"

El ID “resultadoBusqueda” está definido en jQuery como “JQUERY VACIO”

Resultado para "pe", donde en la base de datos hay "Pérez" y "Pedro. Vemos que es case insensitive.

Resultado para “pe”, donde en la base de datos hay “Pérez” y “Pedro”, vemos que es case-insensitive

CONCAT(nombre,' ',apellido) COLLATE UTF8_SPANISH_CI LIKE '%$consultaBusqueda%'

Resultado de la consulta CONCAT(nombre,’ ‘,apellido) COLLATE UTF8_SPANISH_CI LIKE ‘%$consultaBusqueda%’

Output

Conclusión:

Es más fácil de lo que parece, es todo cuestión de comprender como funciona cada parte, desde el HTML hasta la base de datos. Si te sirvió, por favor, compártelo.

Espero que el tutorial haya sido de utilidad. Nos leemos, ¡saludos!

49 comments

  1. SokramR5Alducin · agosto 21, 2015

    Hola, estoy implementando esta misma cuestion en codeigniter, no se si sea lo mismo, pero utilizo la misma estructura de visualizacion, ademas la consulta en mysql es algo parecido a la idea que tengo, pero, no se si me puedes ayudar mencionando como se hace en codeigniter. Espero tu ayuda, gracias.

    Me gusta

  2. Hola desde Colombia,
    Llevo poco menos de un mes aprendiendo esto, me podrías dar el código fuente, debido a que no se bien en donde y como agregar bien lo que estas explicando.

    Me gusta

  3. Heimys Alvarado · enero 29

    Saludos, gracias por el tuto… Excelente explicación… ¿Dónde puedo encontrar este código ?

    Me gusta

  4. Christian · marzo 2

    Hola, excelente tutorial, dime ¿donde puedo descargar el codigo fuente del ejemplo? o me le puedes enviar por favor, te lo agradeceria bastante.

    Me gusta

  5. Anderson · marzo 2

    Buen tutorial te agradeceria si me pudieras mandar el código fuente a mi correo

    Me gusta

  6. kecios · marzo 22

    el archivo conexion.php ?😛

    Me gusta

  7. Piscis.com · marzo 25

    MUUUY BUENO, LO MEJOR Y MAS SENCILLO. PUES TENGO QUE DECIRLO: ENCONTRE OTRAS SOLUCIONES PERO NO ME CONVENCIO EL RESULTADO FINAL…. GRACIAS POR COMPARTIR!!

    Le gusta a 1 persona

  8. Jesús · abril 2

    Excelente post y excelente blog, lo acabo de descubrir y he llegado hasta enero de 2015. He realizado este tutorial y probando he introducido el caracter % en la búsqueda y resultado devuelve todos los registros de la tabla.

    Me gusta

    • Rocanrol · abril 2

      Muchas gracias por tu comentario, Jesús🙂

      Me gusta

      • Jesús · abril 3

        De nada, me gustaría hacerle una pregunta, Si en el campo de búsqueda no ponemos nada,por defecto no muestra nada ¿Sabría como hacer para en caso de que el imput o JQUERY este vacío muestre todos los registros de la tabla por defecto y desde que se añada un caracter a la búsqueda realice las restricciones pertinentes? algo así como:si textoBusqueda == “” muestra todos los datos de la tabla. Muchas gracias.

        Me gusta

      • Rocanrol · abril 3

        Sí, en lugar de

        $("#resultadoBusqueda").html('<p>JQUERY VACIO</p>');

        debería ser:

        $.ajax({
            url: "todosDatos.php",
            type: "POST",
            dataType: "html",
            cache: false,
            contentType: false,
            processData: false,
            //Opcional, mostrar una imagen de carga mientras se obtienen los datos
            beforeSend: function() {
                $("#resultadoBusqueda").html("<img src='cargando.gif' width='30' height='30' />");
            }
            }).done(function(echo){
                $("#resultadoBusqueda").html(echo);
            });

        Y el archivo “todosDatos.php” contiene:

        //Archivo de conexión a la base de datos
        require('conexion.php');
        
        //Pedimos todos los datos
        $consulta = mysqli_query($conexion, "SELECT * FROM mmv001");
        
        //Mostramos los datos
        while($resultados = mysqli_fetch_array($consulta)) {
        	$nombre = $resultados['nombre'];
        	$apellido = $resultados['apellido'];
        	$edad = $resultados['edad'];
        
        	//Output
        	$mensaje .= '
        	<p>
        	<strong>Nombre:</strong> ' . $nombre . '<br>
        	<strong>Apellido:</strong> ' . $apellido . '<br>
        	<strong>Edad:</strong> ' . $edad . '<br>
        	</p>';
        };
        echo $mensaje;

        Y no olvides cambiar el “document ready”:

        $(document).ready(function() {
            $.ajax({
            url: "todosDatos.php",
            type: "POST",
            dataType: "html",
            cache: false,
            contentType: false,
            processData: false,
            beforeSend: function() {
                $("#resultadoBusqueda").html("<img src='cargando.gif' width='30' height='30' />");
            }
            }).done(function(echo){
                $("#resultadoBusqueda").html(echo);
            });
        });
        
        function buscar() {
        // Resto del código

        Me gusta

  9. Jesús · abril 3

    Muchas gracias, lo he probado y ha funcionado perfecto. Hasta pronto.

    Me gusta

  10. Excelente, logré echarlo andar y ahora lo integré a mi Plantilla de WordPress, solo una aclaración al parecer hay un error en la variable $conexion, parece que debe ser $connection bueno a mi me funcionó así. saludos y muchas gracias.

    Me gusta

    • Rocanrol · abril 7

      No entiendo cómo es posible ese error, quizá tengo algo que ver con el resto de tu código…

      Saludos.

      Me gusta

      • crhistian torres · mayo 13

        estoy de acuerdo hay un error en la variable $conexion que esta en :

        $consulta = mysqli_query($conexion, “SELECT * FROM productos
        WHERE NOMBRE COLLATE UTF8_SPANISH_CI LIKE ‘%$consultaBusqueda%’
        OR PROVEDOR COLLATE UTF8_SPANISH_CI LIKE ‘%$consultaBusqueda%’
        OR CONCAT(NOMBRE,’ ‘,PROVEDOR) COLLATE UTF8_SPANISH_CI LIKE ‘%$consultaBusqueda%’
        “);

        ami me salia estos errores en el navegador al momento de hacer la consulta:

        Notice: Undefined variable: conexion in C:\xampp\htdocs\rejilla\buscar.php on line 24

        Warning: mysqli_query() expects parameter 1 to be mysqli, null given in C:\xampp\htdocs\rejilla\buscar.php on line 28

        Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, null given in C:\xampp\htdocs\rejilla\buscar.php on line 31
        Resultados para g
        Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, null given in C:\xampp\htdocs\rejilla\buscar.php on line 41

        estuve por largas horas y comence amirar los comentarios y cambie esa variable por esta $connection y me funciono igual muchas gracias por la esplicacion se te agradece mucho

        Me gusta

      • Rocanrol · mayo 13

        Es extraño, porque el nombre de la variable no debería afectar a eso.

        Comprueba que no se requiera la variable llamada “connection” en algún otro lugar del código.

        Saludos.

        Me gusta

  11. Fortran · abril 14

    Hola tengo un problema con el tema cuando se recoge el valor en PHP resulta que se envía por el post en blanco, tengo problemas en general al trasladar las variables javascript a PHP, he buscado posibles causas y encontré una que decía que los comentarios podrían dar problemas pero no hay manera de resolver esto. Ya que veo que tienes un gran conocimiento en javascript te pido ayuda ya que lo mío es el PHP :S.

    Me gusta

    • Rocanrol · abril 15

      Hola; no termino de comprender el problema, ¿podrías explayarte?

      Me gusta

      • Fortran · abril 17

        Copio exactamente el código tal como lo tienes en el artículo, luego envío algún dato como “pepe” y resulta que la variable “$_POST[‘valorBusqueda’];” no se declara y no recoge ese valor.

        Es como que valorBusqueda no se llegara a enviar al archivo buscar.php para procesarla. He comprobado un array que recoge todas las variables POST que se reciben en este caso en “buscar.php y resulta que no da resultados.

        Me gusta

  12. Jesús · abril 20

    Buenas, me preguntaba si en la funcion buscar, se puede añadir otra variable, por ejemplo var ciudadBusqueda = $(“input#ciudad”).val(); y en el formulario si se lecciono una ciudad se realiza un filtrado tambien, sería como realizar un filtrado multiple, lo he intentado pero no me acaba de salir. http://pcpiezas.info . Un saludo

    function buscar() {
    var textoBusqueda = $(“input#busqueda”).val();
    var ciudadBusqueda = $(“input#ciudad”).val(); //NUEVA VARIABLE PARA FILTRO
    if (textoBusqueda != “”) {
    $.post(“buscar.php”, {valorBusqueda: textoBusqueda}, function(mensaje) {
    $(“#resultadoBusqueda”).html(mensaje);
    });
    } else {
    $.ajax({
    url: “todosDatos.php”,
    type: “POST”,
    dataType: “html”,
    cache: false,
    contentType: false,
    processData: false,
    //Opcional, mostrar una imagen de carga mientras se obtienen los datos
    beforeSend: function() {
    $(“#resultadoBusqueda”).html(“”);
    }
    }).done(function(echo){
    $(“#resultadoBusqueda”).html(echo);
    });
    };
    };

    Me gusta

    • Jesús · abril 21

      Ya lo he conseguido, al final era solamente añadir un par de lineas más, lo dejo por si alguien también quiere realizar una búsqueda múltiple. Saludos.
      }).done(function(echo){
      $(“#resultadoBusqueda”).html(echo);
      $(“#provinciaBusqueda”).html(echo);
      });
      });

      function buscar() {
      var textoBusqueda = $(“input#busqueda”).val();
      var provinciaBusqueda = $(“input#provincia”).val();
      if ((textoBusqueda != “”)||(provinciaBusqueda != “”)) {

      $.post(“buscar.php”, {
      valorBusqueda: textoBusqueda,
      provinciaBusqueda: provinciaBusqueda
      },

      Me gusta

  13. ubarahona · mayo 25

    buena noche podrías apoyarme a mostrar esos datos que arroja el php en cajas de texto ubicadas en el html??

    Me gusta

  14. chucho del canal de MT 93 · junio 3

    Muy bueno broo, lo he implementado y adaptado a mi base de datos y me funciono tremendamente, claro esta que cambie algunos valores y diseño y adaptaciones, pero muy buena tu ayuda. me gustaria hace un tutorial de esto, claro dandote los creditos (canal MT 93) master tutos 93

    Me gusta

    • Rocanrol · junio 27

      Me alegra que te haya sido útil.

      Preferiría que no hagas el tutorial, porque en un futuro me dedicaré yo a hacer vídeos.

      Gracias por el interés.
      Saludos.

      Me gusta

  15. Manuel Gabriel · junio 15

    Muy buen tuto me sirvió de mucho, me has salvado. Sigue adelante

    Me gusta

  16. Fay · junio 25

    Gracias es muy buen tutorial me funciono a la perfeccion

    Me gusta

  17. Jeanmar Gabriel Orta · julio 15

    Valla excelente tutorial buscaba algo así desde hace 2 semanas, gracias una pregunta adicional, sera que en ves de usar echo $mensaje; al final del php, existirá una forma de retornar un array con todos los datos para poder manejar ese resultado como variable desde el index para aplicarle los estilos y forma de visualizar en el index y no en el buscar.php, agradecería mucho tu pronta respuesta amigo

    Me gusta

    • Rocanrol · agosto 20

      Hola. Podrías enviarlo por JSON, tomar la respuesta como parámetro de la función en AJAX (cosa que ya hace) y arreglar los datos con jQuery (o JS, como prefieras) para mostrarlos donde necesites.

      Saludos.

      Me gusta

  18. Alejandro · julio 21

    Antes que nada, muchas gracias por el tutorial.
    Solamente tuve un inconforme y fue al realizar un inner join en la busqueda, cuando hago la búsqueda me muestra todos los registros sin importar lo que yo quiera buscar, caso contrario cuando le quito el inner join, si realiza la busqueda de acuerdo a lo que yo escribí.

    Me gusta

  19. elinux · septiembre 28

    Saludos, me gustaria saber si me puedes orientar ya que tengo un arreglo de inputs dependiendo de la cantidad de articulos que existen ejemplo (codigo del producto y descripción) ya logro al momento de buscar el codigo me llena la descripción con jquery pero quiero hacer lo mismo con varios inputs ya que solamente me toma el primer input de la descripción así este en el producto x me ejecuta el jquery siempre en el primero de la descipción.

    Me gusta

    • Rocanrol · septiembre 29

      Hola;

      si entendí bien, me parece que lo único que habría que hacer es replicar la funcionalidad en los otros inputs.

      Si pudieses crear un MCVE (Minimal, Complete, and Verifiable example – http://stackoverflow.com/help/mcve) sería más fácil entender lo que necesitas.

      Puedes usar JSFiddle, Codepen, o alguno relacionado.

      Saludos.

      Me gusta

  20. elinux · octubre 6

    Saludos, exactamente replicar en los otros inputs

    Me gusta

  21. chava64mx · octubre 12

    Muchas gracias por el tutorial, me sirvió a la perfección. Para los que no entendieron igual donde se hace la conexión a la base igualen la variable $conexion asi $conexion=mysqli_connect(“localhost”, “root”, “”, “mmv”); y eliminen la linea require(‘conexion.php’);

    Me gusta

    • Rocanrol · octubre 13

      El motivo de usar el archivo “conexion.php” es para evitar tener que repetir esa línea de conexión en todos lados, porque el día que cambies cualquiera de esos datos, vas a perder muchísimo tiempo (innecesariamente) cambiando uno por uno.

      Saludos.

      Me gusta

  22. Carlos Chianalino · octubre 27

    Hola !!! excelente el tutorial, de los mas claros que encontre buscando esto, una consulta como podria pasar los valores que se alojan en la div – id=#resultadoBusqueda a un input type=hidden, para mediante otro form, poder insertarlo nuevamente en la BD, te agradeceria mucho si me dar una mano.
    Excelente tu trabajo !!!!

    Me gusta

    • Rocanrol · octubre 28

      Hola,

      no entiendo bien la lógica de lo que necesitas. Por favor, expláyate un poco más al respecto.

      Gracias por tu comentario!🙂

      Me gusta

  23. Jonathan · 22 Days Ago

    Hola excelente tutorial me ha servido mucho. Quisiera saber como se haría si en vez de que se muestre al escribir se muestre la info cuando aprete un boton de enviar, muchas gracias!

    Me gusta

    • Rocanrol · 22 Days Ago

      Hola;

      en lugar de usar la función onKeyUp() del `input`, podrías usar la función onsubmit() del `form`.

      Saludos.

      Me gusta

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s