Una buena forma de hacerlo es mediante JQuery que tiene un mejor manejo de los eventos y brinda un sencillo método para manejar AJAX.
Para nuestro ejemplo, vamos a considerar que tenemos una Base de datos "busqueda" con la tabla "post" que contiene los siguientes campos:
| id | titulo | contenido |
| 1 | | |
Crearemos primero nuestro archivo .php que será el que realizará la búsqueda en la base de datos y mostrará los resultados en una tabla:
Conectamos primero a la base de datos:
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$mysqli = new mysqli($dbhost,$dbuser,$dbpass,"busqueda");
?>
Luego comprobaremos si recibimos el parámetro de búsqueda por POST además de evitar que éste sea un espacio en blanco:
<?php
if(isset($_POST['parametro'])) //Verificamos que venga el parámetro vía POST
{
$parametro=trim($_POST['parametro']); //Limpiamos los espacios en blanco
if($parametro!="") //Comprobamos que no quede una cadena vacía
{
....
Ahora lo sencillo, realizar la búsqueda en la base de datos buscando tanto en el campo "título" como en el campo "contenido" coincidencias con respecto al parámetro buscado y lo metemos todo a una tabla:
<?php
$result = $mysqli->query("SELECT * FROM post WHERE titulo LIKE '%$parametro%' or contenido LIKE '%$parametro%';");
$resultados = array();
while ($row_errs = $result->fetch_array())
{
$resultados[]= $row_errs;
}
?>
<table>
<?php
foreach($resultados as $post):
?>
<tr>
<td>
<?php echo $post['titulo'].": "; ?>
</td>
<td>
<?php echo $post['contenido']; ?>
</td>
</tr>
<?php
endforeach;
?>
</table>
<?php
?>
El archivo de búsqueda quedaría así:
Visualizar archivo de busqueda.php
Ahora la página que ofrecerá la interfaz para la búsqueda (que puede ser un simple html).
Primero que nada se debe tener el archivo de JQuery e insertarlo en la página:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
Ahora bien, lo único que necesitamos es un input tipo text en el cual introducir el texto a buscar y un div el cual mostrará los resultados arrojados por el archivo de busqueda.php :
<input type="text" id="parametro" />
<br />
<br />
<div id="resultado" style="border: solid black 1px;"></div>
Y, por último, la "magia" de JQuery, con JavaScript se hará una función que, tanto al presionar una tecla como al soltarla mientras se esté escribiendo en el campo de texto, se extraiga el contenido del input, se envíe por POST a búsqueda.php y se recarge el div con el resultado obtenido:
<script type="text/javascript">
$(document).ready(function() {
$("#parametro").keydown( //Evento de presionar una tecla en el campo cuyo id sea "parametro"
function(event)
{
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#resultado").load('busqueda.php',{parametro:param}); //Y se envía por vía post al archivo busqueda.php para luego recargar el div con el resultado obtenido
}
);
});
$(document).ready(function() {
$("#parametro").keyup( //Evento de soltar una tecla en el campo cuyo id sea "parametro"
function(event)
{
var param = $("#parametro").attr("value"); //Se obtiene el valor del campo de texto
$("#resultado").load('busqueda.php',{parametro:param}); //Y se envía por vía post al archivo busqueda.php para luego recargar el div con el resultado obtenido
}
);
});
</script>
Pues nada difícil realmente, gracias a la ayuda de JQuery.
Para ver cómo resultaría implementado éste "buscador" aquí un ejemplo con una base de datos que se le han introducido 5 registro:
Para descargar el ejemplo, aquí el enlace de google drive: