Buscador en tiempo real con ajax y php a base de datos

Hoy vamos a hacer un buscador en tiempo real con ajax y php consultando una base de datos y mostrando los resultados debajo del buscador de una manera muy sencilla.

Vamos con el ejemplo, este es el script que hemos llamado ejemplo.php que envía con ajax lo que escribimos en el campo de búsqueda a un fichero php que hemos llamado buscar.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	function buscar_ajax(cadena){
		$.ajax({
		type: 'POST',
		url: 'buscar.php',
		data: 'cadena=' + cadena,
		success: function(respuesta) {
			//Copiamos el resultado en #mostrar
			$('#mostrar').html(respuesta);
	   }
	});
	}
</script>
<form>
	<input type="text" name="bucar" onkeyup="buscar_ajax(this.value);">
</form>
<div id="mostrar"></div>

Ahora recogemos el valor enviado en el fichero buscar.php:

<?php 

//Recogemos la cadena
$busqueda=$_POST['cadena'];

//Aquí hacer la consulta para la busqueda con LIKE $busqueda
$query = sprintf("SELECT * FROM tabla WHERE columna LIKE %s", 
        GetSQLValueString("%" . $busqueda . "%", "text")); //Función GetSQLValueString al fina del tema

//Esto se pega en la div #mostrar
echo 'Demo '.$busqueda; //Mostrar los resultados aquí

?>

Aquí la función GetSQLValueString necesaria para que funcione la consulta https://datoweb.com/post/2496/formatear-valor-de-cadena-para-sql-con-php

Cualquier duda comentar ;)
Editado

Interesante, siempre me pregunté como se hacía más nunca busqué (yo, el más flojo). Y no se me había ocurrido, la magia de "tiempo real" está ahí en el evento onkeyup jajajaj.
________________________________________________________________________________________

Para los que piensan copiar y pegar el código, quiero acotar lo siguiente:
En el post anexado que habla sobre formatear el valor de la cadena para SQL con PHP, la función tiene como nombre valor_cadena() mientras que en el ejemplo mostrado en éste post tiene como nombre GetSQLValueString(). Deben ajustar uno de los dos nombres para que funcione correctamente. Lo que pasa es que GetSQLValueString es el nombre que usa el software Dreamweaver, mientras que valor_cadena es un nombre cualquiera que le puso el colega alber en plan genérico.

Vale, probando el codigo, tal cual esta, lo uncio que me muestra debajo del input es Demo "texto que ponga", pero no me muestra resultados de SQL. Algo estoy haciendo mal?

Zapikero te muestra eso por que es una demo, para que muestre los resultados tienes que hacer la consulta a la base de datos:

//Aquí hacer la consulta para la busqueda con LIKE $busqueda
$query = sprintf("SELECT * FROM tabla WHERE columna LIKE %s", 
        GetSQLValueString("%" . $busqueda . "%", "text")); //Función GetSQLValueString al fina del tema

Aquí la función GetSQLValueString necesaria para que funcione la consulta https://datoweb.com/post/2496/formatear-valor-de-cadena-para-sql-con-php

Si nunca has hecho un buscador interno te paso un enlace a unos de los cursos premium que tenemos http://cursos.datoweb.com/curso-web-anuncios

claro, ya esta echa, pero me sale eso...

Buenas,
Me está dando un error en la variable:

$busqueda=$POST['cadena'];

Recuerda que la variable reservada de PHP es $_POST, con un guión bajo.

$busqueda=$_POST['cadena'];

Cierto tenías razon, nose como se me paso eso, el problema que me da ahora es que en la div donde va el codigo:

<?php 
//Esto se pega en la div #mostrar
echo 'Demo '.$busqueda; //Mostrar los resultados aquí

?>

Me dice que la variable $busqueda no existe, sera porque le he quitado el Demo??
Aunque con el Demo tampoco me sale.
O tengo que poner alguna informacion de la base de datos en vez de Demo??

Salu2

Veo que hay dos temas paralelos acerca de ésto.
El problema aquí es que, bien haces el $query pero no lo ejecutas. Es decir Te falta realizar la consulta php

$consulta = mysql_query($query);

Y luego obtener los resultados

$resultados = mysql_fetch_array($consulta);

Luego de tener los resultados es que muestras lo que quieres mostrar.

echo "Demo " . $esultados["columna"];
// Siendo ["columna"] una de las columnas de la base de datos. Ej: id

Tienes un ejemplo completo en el otro post