Un Buscador que se abre al hacer la consulta

[lidershinobi]

el probelmota es este;


Es un buscador que cuando se aplica el boton buscar carga la consulta y muestra una div para mostrar el resultado de ahi esta el problema



Este es el Formulario :

Código HTML:

<form id="form1" name="form1" method="post" action="<?php echo $BuscarResultados ?>">
        <input class="btn-buscar" type="submit"   value="Buscar" />
        <input  type="text" class="campo-buscar" id="busqueda-blog" size="9" />
      </form> 

Ahora este jquery o java script hace que al clikear el boton buscar comprueba si hay un campo vacio le aviso que esta vacio y si no esta vacio en vio el formulario y el script detecta que al terminar de cargar la pagina me muestre el div con el resultado de la consulta ahi esta el problema el div no se muestra

Código HTML:

<script type="text/javascript">
$(document).ready(function() {
	$('.btn-buscar').click(function(){
if ($('#busqueda-blog').val() === '') {
        alert('El campo esta vacio');
    }
    else {
$(document).ready(function() {
window.onload = detectarCarga;
function detectarCarga(){
$('#Contenedor-Resultado-de-Busquedaa').show()     
}
});
    }
  }); 
  
});		
</script> 

Intente con esta forma que al presionar el boton buscar me muestre la div pero como carga la pagina me reinicia el script y hace que nunca presione el boton byscar y no me muestra el div

Código HTML:

<script type="text/javascript">
$('.btn-buscar').click(function(){
		$('#Contenedor-Resultado-de-Busquedaa').show()     	
	});
});	
</script> 

Ahora intente ponerle un retraso de ejecucion del script para que cuando cargue la pagina me retrase la ejecucion y al termina de cargar esperar que el scrip se ejecute y ahi esta lo grave que cada vez que la pagina se recarga se reinicia el script dejandolo sin funcionar

Código HTML:

<script type="text/javascript">
$('.btn-buscar').click(function(){
$(document).ready(function() {
    setTimeout(function() {
        $('#Contenedor-Resultado-de-Busquedaa').show() 
    },3000);
});		    	
	});
});	
</script> 

busque como enviar el formulario sin recargar la pagina y si existe con ajax y jquery pero es mentira aun asi recarga la pagina

Les pido de como mostrar un div al pesionar un boton que aunque recargue la pagina no me reinicie el escript porque mi buscador no redirige a otra pagina para mostrar los resultado porque es un pequeño blog que ahi mismo me muestre los resultado del buscador y me oculte las publicaciones y me muestre los resultado porfavor alguien sabe como mantener un div .show despues de presionar un boton y cuando recargue la pagina para la consulta que el div siga mostrandose porque esta oculto hasta que se presione el boton del buscador

y para no complicarlos ayudenme a buscar como enviar un formulario y recibir consulta sin recargar la pagina para resolver esto

[sintel_1]

Hola

para lo que quieres hacer debes usar ajax
lo primero cambia:

<input type="text" class="campo-buscar" id="busqueda-blog" size="9" />

por

<input type="text" class="campo_buscar" id="busqueda_blog" size="9" />

js no se lleva bien con los "-"

para que no te recargue la pagina debes anular el evento submit del html
ya que tiene prioridad sobre js, por ejemplo con un return false;

el codigo js te quedaria algo así:

Código:

$(document).ready(function(){ 
	$("#form1").on("submit",function(){
	      	var _campo_buscar = $("#busqueda-blog").val();
		$.post("buscador.php",{campo_buscar: _campo_buscar}, function(busca){
			  $('#Contenedor_Resultado_de_Busquedaa').html(busca); // ojo con los -
		});  
		return false;
	});		   
			 
});

en el lado de servidor deberas hacer la consulta en un archivo "buscador.php"
suponiendo que uses php

Código:

<?php
$campo_buscar =  $_POST['campo_buscar'] ;      

aqui haces la busqueda en la BBDD o lo que sea


<p> aqui un resultado </p>
<p> aqui otro resultado </p>

?>

Saludos.