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!

Anuncios

90 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. Jose Roman Lopez Jimenez · enero 25, 2016

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

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

    Me gusta

  4. Christian · marzo 2, 2016

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

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

    Me gusta

  6. kecios · marzo 22, 2016

    el archivo conexion.php ? 😛

    Me gusta

  7. Piscis.com · marzo 25, 2016

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

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

      Muchas gracias por tu comentario, Jesús 🙂

      Me gusta

      • Jesús · abril 3, 2016

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

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

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

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

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

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

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

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

      Me gusta

      • Fortran · abril 17, 2016

        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

      • vcode · diciembre 18

        Eso es debido a que no se está ejecutando el $.post de jquery. Si usas una versión minimizada, usa una versión completa que incluya $.Post como por ejemplo: https://code.jquery.com/jquery-3.1.0.min.js

        Me gusta

      • Rocanrol · diciembre 18

        La documentación de jQuery que habla sobre $.post() ( https://api.jquery.com/jquery.post/ ) dice en qué versión se añadió qué parámetros permite.

        No estoy seguro que sea porque esté usando una versión vieja, pero es posible.

        Me gusta

      • Vcode · diciembre 18

        No digo que sea por usar una versión vieja de jquery, si no por usar una versión minimizada.
        Yo tenía el mismo problema y usaba la última versión de jquery disponible pero minimizada, y fue poner la que indico arriba y a funcionar.
        Cuando digo minimizada me refiero a versiones slim de jquery.
        https://code.jquery.com/jquery-3.1.1.slim.min.js por ejemplo no me funciona.
        Un saludo y gracias por el tutoriales, que no te las di anteriormente.

        Me gusta

  12. Jesús · abril 20, 2016

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

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

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

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

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

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

    Me gusta

  16. Fay · junio 25, 2016

    Gracias es muy buen tutorial me funciono a la perfeccion

    Me gusta

  17. Jeanmar Gabriel Orta · julio 15, 2016

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

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

    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 · noviembre 17

    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 · noviembre 17

      Hola;

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

      Saludos.

      Me gusta

      • Fer Santos · diciembre 12

        tengo el siguiente error:

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

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

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

        podrias decirme como lo arreglo?

        Me gusta

      • Rocanrol · diciembre 12

        Hola;

        ¿estás haciendo un require() incluyendo el archivo de conexión a la base de datos? ¿Ese archivo crea la conexión y la guarda en una variable llamada “$conexion”?

        Saludos.

        Me gusta

  24. Agustin Fernandez · diciembre 24

    Este es el codigo:
    <?php
    //Archivo de conexión a la base de datos
    include('../sql/db.framework.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($db, “SELECT * FROM caliburn_local_deposito.sqlficha
    WHERE nombre COLLATE UTF8_SPANISH_CI LIKE ‘%$consultaBusqueda%’
    OR codigoean COLLATE UTF8_SPANISH_CI LIKE ‘%$consultaBusqueda%’
    OR idficha 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 = “No hay ningún usuario con ese nombre y/o apellido”;
    } else {
    //Si existe alguna fila que sea igual a $consultaBusqueda, entonces mostramos el siguiente mensaje
    echo ‘Resultados para ‘.$consultaBusqueda.’‘;

    //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’];
    $idficha = $resultados[‘idficha’];
    $codigoean = $resultados[‘codigoean’];

    //Output
    $mensaje .= ‘

    Nombre: ‘ . $nombre . ‘
    Apellido: ‘ . $idficha . ‘
    Edad: ‘ . $codigoean . ‘
    ‘;

    };//Fin while $resultados

    }; //Fin else $filas

    };//Fin isset $consultaBusqueda

    //Devolvemos el mensaje que tomará jQuery
    echo $mensaje;
    ?>
    https://code.jquery.com/jquery-1.9.1.min.js

    $(document).ready(function() {
    $(“#resultadoBusqueda”).html(‘JQUERY VACIO’);
    });

    function buscar() {
    var textoBusqueda = $(“input#busqueda”).val();

    if (textoBusqueda != “”) {
    $.post(“buscar.php”, {valorBusqueda: textoBusqueda}, function(mensaje) {
    $(“#resultadoBusqueda”).html(mensaje);
    });
    } else {
    $(“#resultadoBusqueda”).html(‘JQUERY VACIO’);
    };
    };

    y este es el error:

    Notice: Undefined index: valorBusqueda in C:\xampp\htdocs\Melanic 2.0\stock\TEST.PHP on line 6

    Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, boolean given in C:\xampp\htdocs\Melanic 2.0\stock\TEST.PHP on line 36
    Resultados para
    Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\xampp\htdocs\Melanic 2.0\stock\TEST.PHP on line 46

    Donde esta el problema?

    Me gusta

    • Rocanrol · diciembre 25

      Hola.

      Prueba devolviendo el error de MySQLi

      print_r(mysqli_error($conexion))

      Me gusta

  25. Pablo · enero 17

    Excelente funciona de maravillas, lo único que no logro hacer es que funcione en una pagina don dos form, donde el form1 ejecuta buscar1() donde usa buscar1.php y el form2 ejecute buscar2() y usar buscar2.php

    alguna idea ??

    Me gusta

    • Rocanrol · enero 17

      Habría que ver cómo está estructurado el código.

      Gracias por tu comentario.

      Me gusta

  26. Cosmosoft · febrero 7

    Muchas gracias por publicar tan buen tutorial, ya lo adapte a lo que estaba realizando y y funciona a la perfeccion

    Nota: A los que no les funciana el ajax si hicieron tal cual el script modifique != por !== fue el único cambio que hice y pues las consultas las adapte orientadas a objetos, funciona perfecto.

    Me gusta

  27. Ana Carrasco · febrero 13

    Muchas gracias por el tutorial, por casualidad no sabes como poder seleccionar alguno de los datos devueltos, para que autocomplete el input que llamo a la busqueda

    Me gusta

    • Rocanrol · febrero 14

      Hola, gracias por tu comentario 🙂

      No entiendo muy bien qué necesitas, podrías explayarte un poco más?

      Saludos!

      Me gusta

  28. Ana Carrasco · febrero 14

    Hola, mira estoy tratando de hacer un autocompletar, entonces en lugar de solo regresar el resultado de la consulta a la BD y solo mostrarlo, quisiera que lo devolviera dentro de un input, gracias

    Me gusta

  29. Ana Carrasco · febrero 21

    Gracias, por tomarte tu tiempo para responderme, si había checado ese enlace, pero hace un autocompletar con una lista preestablecida y yo necesito que la lista sea llenada con los valores de una consulta a una base de datos, ya encontre algo asi en http://www.monoforms.com/content/autocompletar-de-jquery-con-php-y-mysql, me funciona la primera vez, pero no me recarga la lista conforme voy tecleando palabras, sigo trabajando en eso, nuevamente gracias y bonito dia

    Me gusta

    • Rocanrol · febrero 21

      Si no hay urgencia, puedo hacer un tutorial al respecto este fin de semana.

      Me gusta

  30. cristian · marzo 3

    muy buen post ,una pregunta como lo aplico usando MVCPOO modelo vista controlador sabiendo que las rutas se usan por controladores y acciones,?

    Le gusta a 1 persona

    • Rocanrol · marzo 3

      Hola; no sabría decirte exactamente. Tampoco se si estás usando una arquitectura de MVC personalizada, o si estás usando Laravel, etc.

      Te recomiendo que preguntes en algún foro.

      Me gusta

      • cristian · marzo 3

        MVC estandar,el controlador como intermedio de vistas y modelos,muchas gracias

        Me gusta

      • Rocanrol · marzo 3

        Con la información que me das no puedo ayudarte.

        Me gusta

  31. Hola; el codigo es muy util pero tengo una consulta, al momento de buscar algunos campos de la columna no me los esta trayendo otros si. Es decir con algunos criterios si funciona la consulta. Agradezco su ayuda

    Me gusta

    • Rocanrol · marzo 31

      Hola. ¿Qué consulta SQL estás realizando?

      Me gusta

      • Hola. Si ya lo corregi estoy haciendo con PDO y en las consultas con fetchColumn no trae algunos datos cambie por columnCount pues me trae la consulta completa. Muchas Gracias pagina muy util.

        Me gusta

  32. Karen · abril 6

    Gracias por el aporte 🙂

    Me gusta

  33. David Alexander Gonzalez Ardon · abril 19

    Me da el error de la E_Notice ( Notice: Undefined index: valorBusqueda in C:\wamp64\www\mkt1\admin\buscar.php on line 93) como que la variable $consultaBusqueda = $_POST[‘valorBusqueda’]; no trajese nada. me pueddes orientar, te lo agredeceria

    Me gusta

    • Rocanrol · abril 20

      Checkea si desde Devtools > Network puedes ver la llamada de AJAX, y si es así, revisa que esté enviando los datos.

      Me gusta

  34. David Alexander Gonzalez Ardon · abril 21

    y donde veo eso???

    Me gusta

  35. David Alexander Gonzalez Ardon · abril 21

    esto> Checkea si desde Devtools > Network puedes ver la llamada de AJAX, y si es así, revisa que esté enviando los datos.

    Me gusta

    • Rocanrol · abril 21

      No capto cuál es la parte que no comprendes. Si no sabes qué son los Dev Tools, podrías googlearlo.

      Me gusta

  36. Anthony Garibay · mayo 16

    Muy buen artículo, me sirvió mucho de ayuda, yo que empiezo en Ajax =), muchas gracias

    Me gusta

  37. Javier · mayo 17

    Hola, muy buenas. Muy buen post y una explicación clara. Aprovecho para realizarte una consulta: estoy tratando de emplear un ‘segundo buscador’, es decir, filtrar por otro campo de búsqueda si encontró algún resultado con el primer buscador. ¿Alguna sugerencia? Todavía no pude llegar a buen puerto…

    Me gusta

  38. Marcos · mayo 24

    Buenas noches. Tengo un error con las tildes en los resultados de las búsquedas, cuando un nombre o un apellido tienen un acento, me aparece: �

    En la base de datos sí aparece con el acento pero al momento de buscarlo, aparee ese signo de interrogación. ¿Alguna idea de qué sea?

    Me gusta

    • Alexis Vichich · junio 15

      tiene que ver con el cotejamiento de la tabla a la cual consultas y si en tu php usas utf8 o no en el header

      Me gusta

  39. pedroruizba · junio 28

    Muchas gracias por tu tutorial me sirvo de maravilla.

    Me gusta

  40. Alan · julio 12

    Simplemente agradecerte!!!!!!!!!! (y)

    Me gusta

  41. Gaby Hdz · julio 13

    Gracias 😀

    Me gusta

  42. Florencia Mendoza · julio 19

    muy bueno…excelente!…cuando haras tus videos tutoriales para estar al pendiente…

    Me gusta

  43. Carlos · julio 19

    Buenas tardes, queria consultar lo siguiente, queda de mas decir que el tutorial es excelente y lo estoy usando en todos mis proyectos, pero justamente en uno de ellos, donde la plantilla es grande y larga, la busqueda se realiza al final de toda la planilla (con el scroll hay que bajar para ver el campo a buscar) y luego de realizar la busqueda me trae los resultados pero me vuelve al comienzo de la plantilla, tengo que volver a bajar con el scroll para apretar el boton y guardar la informacion, tienes idea de porque estaria pasando eso?, muchas gracias.

    Me gusta

  44. Angel Luis · 29 Days Ago

    Hola tienes el código fuente en un archivo comprimido o algo parecido? buen aporte muchas gracias.

    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