Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
1
Puntos
13496
Visitas
8
Resp
Por alber hace 34 meses
Administrador
Respuesta #1
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.
0
Puntos
Por Jose hace 34 meses
Experto Sitio web
Respuesta #2
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?
0
Puntos
Por zapikero hace 34 meses
Avanzado Sitio web
Respuesta #3
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
0
Puntos
Por alber hace 34 meses
Administrador
Respuesta #4
claro, ya esta echa, pero me sale eso...
0
Puntos
Por zapikero hace 34 meses
Avanzado Sitio web
Respuesta #5
Buenas,
Me está dando un error en la variable:
$busqueda=$POST['cadena'];
0
Puntos
Por valentinchiflu hace 33 meses
Principiante
Respuesta #6
Recuerda que la variable reservada de PHP es $_POST, con un guión bajo.
$busqueda=$_POST['cadena'];
0
Puntos
Por Jose hace 33 meses
Experto Sitio web
Respuesta #7
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
0
Puntos
Por valentinchiflu hace 33 meses
Principiante
Respuesta #8
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

0
Puntos
Por Jose hace 33 meses
Experto Sitio web
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate