Pues he estado buscando algun ejemplo lo mas basico posible para entender el funcionamiento ya pude ajustar un ejemplo para que me haga la busqueda mediante lo que se escriba en una caja de texto (antes de pasar a poner las otras dos cajas mas)
El detalle es que solo me funciona si realizo mi busqueda en el evento onkeyup de mi caja de texto, pero necesito que lo ejecute por medio de un boton, ya que en la version final la busqueda la realizara en cientos de miles de registros, y si lo dejo asi la busqueda sera eterna porque va filtrando conforme voy escribiendo.
El codigo de mi index.php quedo asi:
Código PHP:
Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Busqueda Ajax</title>
<!-- Bootstrap -->
<link href
="css/bootstrap.min.css" rel
="stylesheet"> <script src="js/bootstrap.min.js"></script>
<script>
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
function showData(str) {
if (str=="") {
document.getElementById("dbgridresultados").innerHTML="";
return;
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("dbgridresultados").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","consulta.php?q="+str,true);
xmlhttp.send();
}
</script>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Inicio</a>
</div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Buscar Nombre" id="buscarnombre" name="users" onkeyup="showData(this.value)" >
</div>
<button type="submit" class="btn btn-default">Buscar</button>
</form>
</div>
</nav>
</head>
<body>
<div class="container">
<div id="dbgridresultados"><b>El resultado de la busqueda aparecera aqui</b></div>
</div>
</body>
</html>
Y el de mi archivo externo consulta.php que genera toda la consulta y me devuelve el resultado quedo de la siguiente manera
Código PHP:
Ver original<?php
$mysqli = new mysqli("localhost", "root", "", "test");
if ($mysqli->connect_errno) {
echo "Fallo al conectarse a MySQLL: " . $mysqli->connect_error;
}
$sql="SELECT * FROM personas WHERE nombre like '".$q."'";
$result = $mysqli->query($sql);
echo "<table class='table table-bordered table-striped'>
<tr>
<th>ID</th>
<th>NOMBRE</th>
<th>PATERNO</th>
<th>MATERNO</th>
<th>EDAD</th>
<th>DIRECCION</th>
<th>TELEFONO</th>
</tr>";
while($row = $result->fetch_assoc()) {
echo "<tr>";
echo "<td>" . $row['Id'] . "</td>";
echo "<td>" . $row['Nombre'] . "</td>";
echo "<td>" . $row['ApellidoPaterno'] . "</td>";
echo "<td>" . $row['ApellidoMaterno'] . "</td>";
echo "<td>" . $row['Edad'] . "</td>";
echo "<td>" . $row['Direccion'] . "</td>";
echo "<td>" . $row['Telefono'] . "</td>";
echo "</tr>";
}
echo "</table>";
//$mysqli->close();
?>
Como mencione ya funciona tomando el valor de la caja de texto, pero quiero que la busqueda se haga guando oprima el boton se que tiene que ir en el evento onclick, pero si lo pongo en el boton siempre me devuelve la tabla en blanco.
Agradecere sus opiniones y consejos