[SOLUCIONADO] Busqueda ajax

[MaNuX0218]

Hola el tema es que tengo creado un buscador en php, mysql y ajax y me va perfecto solo que cuando quiero buscar con dos campos no me busca o lo unico que e conseguido es que me busque independientemente.

Lo que intento es esto, haber si puedo explicarme:

Tengo dos inputs llamados "valor 1" y "valor 2" y en la base de datos el valor 1 seria para la busqueda de "Pepito" y para el valor 2 la busqueda seria "Girro", entonces la idea es si en el valor 1 introduzco "P" me apareceria Pepito y al introducir en el valor 2 "G" aparececia Girro, entonces la idea es que si en valor 1 introduzco P y en valor 2 introduzco G aparezca Pepito, Girro, ya que la P coincide con Pepito y la G con Girro que pertenece a Pepito.

Este es el codigo js que tengo:

Código Javascript:

$(document).ready(function(){                               
var consulta;
$("#valor1").focus();                                                                                    
$("#valor1").keyup(function(e){
consulta = $("#valor1").val();                                              
$.ajax({
type: "POST",
url: "pages/result.php",
data: "valor1=" + consulta,
dataType: "html",
beforeSend: function(){
$("#resultado").html("Resultado Valor 1: ");
},
success: function(data){                                                   
$("#resultado").hmtl(data);
$("#resultado").val(consulta);
}
});                                                                                 
});                                                                
});
 
 
$(document).ready(function(){                               
var consulta;
$("#valor2").focus();                                                                                    
$("#valor2").keyup(function(e){
consulta = $("#valor2").val();                                              
$.ajax({
type: "POST",
url: "pages/result.php",
data: "valor2=" + consulta,
dataType: "html",
beforeSend: function(){
$("#resultado").html("Resultado Valor 2:");
},
success: function(data){                                                   
$("#resultado").hmtl(data);
$("#resultado").val(consulta);
}
});                                                                                 
});                                                                
});
 

No se si se me ha entendido, de lo contrario indicarmelo e ire explicandome lo mejor que pueda.

Saludos.

[Alexis88]

Si no estás obteniendo el resultado esperado es porque estás haciendo algo mal en la consulta, pero además, estás enviando los datos de cada caja de texto por separado, por lo que al enviar el dato escrito en la segunda luego de haberlo hecho con el dato de la primera, la consulta solo buscará con el segundo dato.

Deberías de enviar a ambos datos a la vez:

Código Javascript:

$("#valor1, #valor2").keyup(function(){
    var dato1 = $("#valor1").val(),
        dato2 = $("#valor2").val();
 
    $.ajax({
        type: "GET",
        url: "pages/result.php",
        data: {
            nom: dato1,
            ape: dato2
        },
        dataType: "html",
        success: function(response){                                                   
            $("#resultado").html(response);
        }
    });
});
 

Y en la consulta harías algo similar a esto:

Código PHP:

$nom = mysqli_real_escape_string(strip_tags($_GET['nom']));
$ape = mysqli_real_escape_string(strip_tags($_GET['ape']));
 
$query = mysqli_query($conexion, "SELECT * FROM tabla WHERE nom LIKE '%{$nom}%' AND ape LIKE '%{$ape}%'");
 

Como se trata de una consulta a la BD, debes de utilizar el método GET que es el apropiado para este caso. Por otro lado, veo que al recibir la respuesta de la petición asíncrona, haces esto:

Código Javascript:

$("#resultado").hmtl(data);
$("#resultado").val(consulta);
 

Lo cual es incompatible, es decir, si la respuesta la mostrarás en un elemento que no posea el atributo value, entonces lo primero está de más, sin embargo, si piensas mostrar la respuesta en un elemento como un <div>, <label> o similares, solo lo primero estaría bien, aunque el nombre del método es html y no hmtl.

Saludos

[MaNuX0218]

Gracias Alexis88 por tu respuesta, e probado como me indicas y me muestra todos los datos y siempre me indica que no está definido $nom y $ape cuando si lo está.

También e probado a modificarlo y a quedado así, también sin resultados...

Código Javascript:

$(document).ready(function(){
$("#valor1, #valor2").keyup(function(){
 
var 
dato1 = $("#valor1").val(),
dato2 = $("#valor2").val();
     
$.ajax({
type: "GET",
url: "pages/result.php",
dataType: "html",
beforeSend: function(){
$("#resultado").html("<img src='public/images/ajax-loader.gif' width='20' height='20' />");
},
success: function(data){                                                   
$("#resultado").html(data);
$("#resultado").val(consulta);
}
});                                                                                 
});                                                                
});
 

¿Alguna idea?

Saludos.

[Alexis88]

De la segunda forma no va a funcionar porque nunca envías los valores. Creo que puede ser porque te has olvidado de cambiar el método de recepción de datos en el archivo PHP, recuerda que ahora usas el método GET, por lo que $_POST['nom'] no te va a servir. Es solo una suposición, sin ver el código actualizado solo puedo adivinar.

Saludos

[MaNuX0218]

E cambiado todo por GET y no funciona, tambien lo e probado por POST para dudas pero hace lo mismo. Por lo que ese no es el problema.

Saludos.

[Alexis88]

Muéstranos el código actualizado para poder ayudarte.

[MaNuX0218]

Haber mostrare todos, html, php(mysql) y ajax

Código HTML:

<form action="" method="get">
 
<input type="text" name="nom" id="valor1" maxlength="13">
 
<input type="text" name="ape" id="valor2" maxlength="6">
 
</form>
 

Código PHP:

<?php
 
$con = mysql_connect('localhost','root', '');
mysql_select_db('db', $con);
 
$nom = mysql_real_escape_string(strip_tags($_GET['nom']));
$ape = mysql_real_escape_string(strip_tags($_GET['ape']));
 
$sql = mysql_query('SELECT * FROM tabla WHERE nombre LIKE "'.$_GET['nom'].'%" AND apellido LIKE "'.$_GET['ape'].'%"', $con);
 
while($row=mysql_fetch_array($sql)){
 
echo '<tbody>
<td>'.$row['nombre'].'</td>
<td>'.$row['apellido'].'</td>
<td>'.$row['edad'].'</td>
<td>'.$row['sexo'].'</td>
</tbody>';   
 
}
 
?>
 

Código Javascript:

$(document).ready(function(){
$("#valor1, #valor2").keyup(function(){
 
var 
dato1 = $("#valor1").val(),
dato2 = $("#valor2").val();
     
$.ajax({
type: "GET",
url: "pages/result.php",
dataType: "html",
beforeSend: function(){
$("#resultado").html("<img src='public/images/ajax-loader.gif' width='20' height='20' />");
},
success: function(data){                                                   
$("#resultado").html(data);
$("#resultado").val(consulta);
}
});                                                                                 
});                                                                
});
 

[Alexis88]

Te lo vuelvo a decir: Te faltó enviar los datos.

Código Javascript:

$.ajax({
    type: "GET",
    url: "pages/result.php",
    data: {
        nom: dato1,
        ape: dato2
    },
    dataType: "html",
    success: function(response){                                                   
        $("#resultado").html(response);
    }
});
 

Y como te dije al inicio, si $("#resultado") no posee el atributo value, no tiene sentido que hagas esto:

Código Javascript:

$("#resultado").val(consulta);
 

Saludos

[MaNuX0218]

Gracias ahora si que me ha funcionado, ahoro otra duda, como podría hacer que cargase antes de mostrar los datos, lo tenia así:

Código Javascript:

$("#resultado").html("<img src='public/images/ajax-loader.gif' width='20' height='20' />");
 

Y también que cuando borre los campos no muestre nada, por que al eliminar lo que introduzco automaticamente me muestra todos los registros.

Saludos.

[Alexis88]

Lo primero lo puedes indicar en el atributo beforeSend que he visto que has usado, mientras que para lo segundo, bastaría una condición; solo si uno o ambos campos tienen datos, ejecutas el método Ajax.

Código Javascript:

if (dato1.length || dato2.length){
    //Ejecutas el método Ajax
}
 

Esto iría después de las líneas en donde tomas a los valores de ambas cajas y justo antes del método Ajax.

Saludos