[SOLUCIONADO] Abrir un recuadro donde se muestren resultados de una búsqueda

Joaso · #1 (**permalink**) 20/07/2016, 17:18

Hola,
Estoy haciendo una web donde voy a tener 3 barras de busqueda con diferentes bases de datos, entonces me gustaría que todo se pudiera hacer en una misma página.

Quiero tratar de que al enviar la búsqueda, en lugar de que abra otra pestaña o modifique la actual, abra un cuadro que ocupe un porcentaje de la pantalla, como cuando le das click a una imagen y se hace más grande.

Si pudieran ayudarme sólo con el código para abrir ese recuadro al enviar la búsqueda agradecería mucho, la búsqueda en sí, ya la tengo hecha.

Código PHP:

  <?php 

    require_once('conn/connect.php');

 
    if (isset($_REQUEST['search'])){

        $search = strtolower($_REQUEST['search']);

    }

 
    $consulta = "SELECT * FROM art WHERE codigo LIKE '%".$search."%' OR nombre LIKE '%".$search."%' OR descripcion LIKE '%".$search."%' OR categoria LIKE '%".$search."%' OR material LIKE '%".$search."%' OR color LIKE '%".$search."%' OR tecnica LIKE '%".$search."%'";

    $resultado = $connect->query($consulta);

    $fila = mysqli_fetch_assoc($resultado);

    $total = mysqli_num_rows($resultado);

?>

<?php if ($total>0 && $search!='') { ?>

    <?php do { ?>

        <div class="art">

            <?php echo '<img src="'.$fila['imagen'].'"/>'; ?>

            <span class="titulo"><?php echo str_replace($search, '<strong>'.$search.'</strong>', utf8_encode($fila['codigo'])) ?></span><br>

 
            <span class="contenido"><?php echo str_replace($search, '<strong>'.$search.'</strong>', substr(utf8_encode($fila['nombre']),0,150)) ?></span><br>

 
        </div>

    <?php } while ($fila=mysqli_fetch_assoc($resultado)); ?>

<?php }  

elseif($total>0 && $search=='') echo '<script type="text/javascript">location.href = "index";</script>';

else echo '<h2>No se han encontrado resultados</h2><p>Inténta realizar tu búsqueda con palabras más especificas...</p>';

?>

Éste es el buscador que tengo hecho, el div en donde se muestra la búsqueda se llama "resultados"
Gracias

Joaso · #2 (**permalink**) 21/07/2016, 06:18

Como futuras referencias lo solucioné utilizando [URL="http://fancybox.net/"]"fancybox"[/URL], y creando un documento llamado buscador:

Código:

<?php require_once('conn/connect.php') ?>
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/book.css" />
<script type="text/javascript" src="js/ajax.js"></script>
<link href='//fonts.googleapis.com/css?family=Stint+Ultra+Condensed' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Roboto+Condensed:400,300,300italic,400italic,700,700italic' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
		<script src="js/modernizr.custom.js"></script>
	</head>
	<body>	

	<div class="fondo"><h3>PDF´S Y LIBROS</h3></div>
		<div class="kek"><form action="buscador" method="post" name="search_form" id="search_form">
  <input type="text" id="search" name="search" placeholder="Buscar..">
</form>
</div>
<div id="resultados">
			<?php 

	if (isset($_REQUEST['search'])){
		$search = strtolower($_REQUEST['search']);
	}

	$consulta = "SELECT * FROM libros WHERE autor LIKE '%".$search."%' OR titulo LIKE '%".$search."%' OR materia LIKE '%".$search."%' OR portada LIKE '%".$search."%' OR grado LIKE '%".$search."%'";
	$resultado = $connect->query($consulta);
	$fila = mysqli_fetch_assoc($resultado);
	$total = mysqli_num_rows($resultado);
?>
<?php if ($total>0 && $search!='') { ?>
	<?php do { ?>
<div class="component">

				<ul class="align">
					<li>
						<figure class='book'>

						<!-- Front -->

							<ul class='hardcover_front'>
								<li>
									<?php echo '<img src="'.$fila['portada'].'" width="100%" height="100%"/>'; ?>
								</li>
								<li></li>
							</ul>

						<!-- Pages -->

							<ul class='page'>
								<li></li>
								<li>
									<a class="btn" href="#">Descargar</a>
								</li>
								<li></li>
								<li></li>
								<li></li>
							</ul>

						<!-- Back -->

							<ul class='hardcover_back'>
								<li></li>
								<li></li>
							</ul>
							<ul class='book_spine'>
								<li></li>
								<li></li>
							</ul>
							<figcaption>
								<h1><?php echo str_replace($search, '<strong>'.$search.'</strong>', utf8_encode($fila['titulo'])) ?></h1>
								<span><?php echo str_replace($search, '<strong>'.$search.'</strong>', utf8_encode($fila['autor'])) ?></span>
								<p><?php echo str_replace($search, '<strong>'.$search.'</strong>', utf8_encode($fila['grado'])) ?> - <?php echo str_replace($search, '<strong>'.$search.'</strong>', utf8_encode($fila['materia'])) ?></p>
							</figcaption>
						</figure>
					</li>
				</ul>
			</div>
	<?php } while ($fila=mysqli_fetch_assoc($resultado)); ?>
<?php }  
elseif($total>0 && $search=='') echo '';
else echo '<h2>No se han encontrado resultados</h2>';
?>
</div>
	</body>
</html>

Para dirigirlo desde una un enlace de fancybox iframe:

Código:

<a class="various fancybox.iframe" href="buscador"></a>