Buscador con letras del abecedario con consultas a base de datos
En este artículo vas a descubrir como crear un buscador con letras del abecedario con consultas a una base de datos.
En muchas páginas webs, sobretodo, en las que contienen muchos registros es necesario tener varios sistemas de búsqueda para que los usuarios lleguen a los artículos o productos que desean encontrar de forma rápida y fácil.
Un ejemplo claro son la infinidad de páginas web que presentan libros o películas donde si ya sabemos previamente como se llama el libro o película podemos acceder a la letra por la que comience.
Estoy hablando de presentar al usuario un abecedario con sus letras y poder pulsar en una de ellas para ver los artículos que comiencen por dicha letra.
Implementar esta idea no es nada difícil utilizando HTML, PHP y MySQL.
En el el cuerpo de la página o dentro de la etiqueta <body>, allí donde desees puedes agregar el código de marcado para presentar las letras del abecedario mediante enlaces. Por ejemplo:
<div id="alfabeto">
<ul class="dictionary" id="filters">
<li><a href="index.php?letra=a">A</a></li>
<li><a href="index.php?letra=b">B</a></li>
<li><a href="index.php?letra=c">C</a></li>
<li><a href="index.php?letra=d">D</a></li>
<li><a href="index.php?letra=e">E</a></li>
<li><a href="index.php?letra=f">F</a></li>
<li><a href="index.php?letra=g">G</a></li>
<li><a href="index.php?letra=h">H</a></li>
<li><a href="index.php?letra=i">I</a></li>
<li><a href="index.php?letra=j">J</a></li>
<li><a href="index.php?letra=k">K</a></li>
<li><a href="index.php?letra=l">L</a></li>
<li><a href="index.php?letra=m">M</a></li>
<li><a href="index.php?letra=n">N</a></li>
<li><a href="index.php?letra=o">O</a></li>
<li><a href="index.php?letra=p">P</a></li>
<li><a href="index.php?letra=q">Q</a></li>
<li><a href="index.php?letra=r">R</a></li>
<li><a href="index.php?letra=s">S</a></li>
<li><a href="index.php?letra=t">T</a></li>
<li><a href="index.php?letra=u">U</a></li>
<li><a href="index.php?letra=v">V</a></li>
<li><a href="index.php?letra=w">W</a></li>
<li><a href="index.php?letra=x">X</a></li>
<li><a href="index.php?letra=y">Y</a></li>
<li><a href="index.php?letra=z">Z</a></li>
</ul>
</div>
Si te fijas bien, en los enlaces estoy pasando la letra por parámetro GET para capturarla por PHP para realizar la consulta correspondiente.
Este código de marcado quizá se puede optimizar considerando lo que he explicado en el siguiente enlace:
El código PHP que recibe la letra mediante el parámetro GET, lo puedo hacer así:
if (isset($_GET['letra'])) {
$letra = strtoupper($_GET['letra']);
//tu consulta a la base de datos...
}
Utilizo la función strtoupper() de PHP para convertir a mayúsculas por el simple motivo de que todos artículos publicados empiezan por mayúsculas.
La clave del asunto es incluir en la query o consulta que retorna los registros la siguiente condición en el WHERE.
AND title LIKE '" . $letra . "%'
Esta condición indica a la consulta SQL que quiero sacar todos los registros en el que el título empiece por la letra escogida.
Ver demo Ver módulo Buscador con letras del abecedario para Prestashop
hola intente hacerlo pero no me salió , solo pude dejar en abecedario de forma visual pero no configurarlo , la voy a hacer fácil y díganme si se puede quizás lo vuelva a intentar , en blogger se puede hacer o tengo que usar otro tipo de blog o pagina web ? saludos ¡
Hola,
Este desarrollo solo se puede aplicar en un entorno o servidor donde esté corriendo PHP.
Saludos
Aqui otro en PHP
<?php
for($i=65; $i<=90; $i++) {
$letra = chr($i);
echo '’.$letra.’ | ‘;
}
Gracias por la aportación. Parece interesante!
Queda horrible ese codigo!
Mejor usen un bucle FOR para recorrer el abecedario e imprimir los links con metodo GET, asi:
<a href='pagina.php?variable=’>
Y listo! Hice el link en formato HTML porque no me acuerdo la combinación de comillas ^^. Pero eso funciona excelente.
Podrías por favor ayudarme con esto?
Necesito el código del loop completo o algún theme con ejemplo porque no entiendo.
Saludos!
La query que se hace en el ejemplo en funcionamiento es la siguiente:
Espero te sirva,
Saludos
De casualidad no habra uno asi pero para blogger pero por separado es decir que sirva para catalogar cada una de las letras para ponerlos en paginas o post por separado en vez de uno solo gracias.
Hola, muy interesante tu post. Lo he intentado pero me sale una cosa rara. Lo que yo quiero es un listado de músicos a través de este menú. Lo estoy haciendo con wordpress y no sé si es por esto que no me funciona del todo bien.
Graciassssssssssssss
Te faltará hacer correctamente la query dentro del worpdress. Si te fijas, el ejemplo en funcionamiento está cogiendo los post de este mismo blog WordPress.
Simply wish to say your article is as surprising. The clarity on your submit is just nice and i can suppose you are knowledgeable on this subject. Fine along with your permission let me to take hold of your feed to keep up to date with coming near near post. Thank you 1,000,000 and please carry on the gratifying work.