Buscador
Permite a los usuarios introducir una palabra clave o una frase y obtener información relevante.
El buscador se centra en permitir a los usuarios buscar contenido específico dentro de
una interfaz. Proporciona resultados relevantes, sugerencias, opciones de filtrado y
clasificación, y ayuda a los usuarios a encontrar rápidamente la información que están
buscando.
El buscador mejora la experiencia del usuario al proporcionar una forma eficiente y
efectiva de navegar y acceder a la información relevante.
Estas son algunas de las características y funcionalidades del buscador:
- Búsqueda: La funcionalidad principal del buscador es permitir a los usuarios buscar contenido específico dentro de una interfaz. Los usuarios pueden ingresar palabras clave, frases o términos de búsqueda para encontrar información relevante.
- Indexación: El buscador utiliza técnicas de indexación y recuperación de datos para encontrar y mostrar resultados relevantes en función de los términos de búsqueda ingresados por el usuario. Presenta los resultados organizados, clasificados y con iconos que permiten un escaneo más rápido de los resultados.
- Autocompletado: El buscador puede proporcionar funciones de autocompletado y sugerencias mientras el usuario ingresa términos de búsqueda. Esto ayuda a los usuarios a encontrar rápidamente resultados relevantes y mejora la precisión de la búsqueda al sugerir palabras o frases relacionadas.
- Clasificación: El buscador aplica criterios de clasificación para ordenar los resultados según su relevancia, fecha, popularidad, tipología, entre otros.
- Tiempo real: El buscador puede realizar búsquedas en tiempo real, mostrando resultados a medida que el usuario ingresa los términos de búsqueda. Esto proporciona una experiencia interactiva y permite a los usuarios ajustar su búsqueda mientras ingresan información.
Buscador y Resultados de Búsqueda
HTML
<div class="form-column">
<div id="div-buscador" class="flex align-items-center pos-relative">
<input id="input-buscador" type="text"
placeholder="Busca carreras, modalidades, sedes"
oninput="mostrarIconoBorrar()">
<img id="icono-buscador-borrar" class="icono-borrar-clase"
src="iconos/cancelar_lineal.svg" alt="" width="32" height="32"
onclick="borrarContenido()">
<button class="btn-icono" style="margin-left: 10px;">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32">
</button>
<ul id="resultados-lista" class="buscador-menu">
<li>Resultado 1</li>
<li>Resultado 2</li>
<li>Resultado 3</li>
<li>Resultado 4</li>
</ul>
</div>
</div>
CSS
#div-buscador {
display: flex;
align-items: center;
position: relative;
}
#div-buscador .icono-borrar-clase {
display: none;
position: absolute;
right: 73px !important;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 10;
}
.buscador-menu {
display: none;
position: absolute;
top: 58px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFFFFF;
width: 100%;
max-width: 322px;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
}
.buscador-menu li {
padding: 12px 20px;
text-decoration: none;
display: flex;
border-radius: 0 0 0 0;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
}
.buscador-menu li:first-child {
border-radius: 10px 10px 0 0;
padding: 12px 20px;
text-decoration: none;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
}
.buscador-menu li:last-child {
border-radius: 0 0 10px 10px;
padding: 12px 20px;
text-decoration: none;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
}
.buscador-menu li:hover {
background-color: #EBF2F9;
}
.buscador-menu li:active {
background-color: #D7E5F4;
}
.buscador-menu li:first-child:hover {
background-color: #EBF2F9;
border-radius: 10px 10px 0 0 !important;
}
.buscador-menu li:first-child:active {
background-color: #D7E5F4;
border-radius: 10px 10px 0 0 !important;
}
.buscador-menu li:last-child:hover {
background-color: #EBF2F9;
border-radius: 0 0 10px 10px !important;
}
.buscador-menu li:last-child:active {
background-color: #D7E5F4;
border-radius: 0 0 10px 10px !important;
}
JS
var input = document.getElementById("input-buscador");
var div = document.getElementById("div-buscador");
var iconoBorrar = document.getElementById("icono-buscador-borrar");
var resultadosLista = document.getElementById("resultados-lista");
//Función para mostrar el icono borrar cuando hay al menos un caracter ingresado
en el input
function mostrarIconoBorrar() {
if (input.value.length > 0) {
iconoBorrar.style.display = "block";
resultadosLista.style.display = "block";
} else {
iconoBorrar.style.display = "none";
resultadosLista.style.display = "none";
}
}
//Función que borra el contenido al presionar el icono con la cruz
function borrarContenido() {
iconoBorrar.style.display = "none";
resultadosLista.style.display = "none";
input.value = "";
}
Buscador y Resultados de Búsqueda con icono
Resultado 1-
Resultado 2
-
Resultado 3
-
Resultado 4
-
Resultado 5
HTML
<div class="form-column">
<div id="div-buscador" class="flex align-items-center pos-relative">
<input id="input-buscador" type="text"
placeholder="Busca carreras, modalidades, sedes"
oninput="mostrarIconoBorrar()">
<img id="icono-buscador-borrar" class="icono-borrar-clase"
src="iconos/cancelar_lineal.svg" alt="" width="32" height="32"
onclick="borrarContenido()">
<button class="btn-icono" style="margin-left: 10px;">
<img src="iconos/lupa_lineal.svg" alt="" width="32" height="32">
</button>
<ul id="resultados-lista" class="buscador-menu">
<li>Resultado 1</li>
<li>Resultado 2</li>
<li>Resultado 3</li>
<li>Resultado 4</li>
</ul>
</div>
</div>
CSS
#div-buscador {
display: flex;
align-items: center;
position: relative;
}
#div-buscador .icono-borrar-clase {
display: none;
position: absolute;
right: 73px !important;
cursor: pointer;
transition: 0.3s ease-in-out;
z-index: 10;
}
.buscador-menu {
display: none;
position: absolute;
top: 58px;
left: 0;
margin: 0;
padding: 0;
background-color: #FFFFFF;
width: 100%;
max-width: 322px;
filter: drop-shadow(0px 3px 16px rgba(16, 15, 15, 0.2));
border-radius: 10px;
}
.buscador-menu li {
padding: 12px 20px;
text-decoration: none;
display: flex;
border-radius: 0 0 0 0;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
}
.buscador-menu li:first-child {
border-radius: 10px 10px 0 0;
padding: 12px 20px;
text-decoration: none;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
}
.buscador-menu li:last-child {
border-radius: 0 0 10px 10px;
padding: 12px 20px;
text-decoration: none;
display: flex;
justify-content: flex-start;
align-items: center;
gap: 10px;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 26px;
color: #024588;
height: 50px;
}
.buscador-menu li:hover {
background-color: #EBF2F9;
}
.buscador-menu li:active {
background-color: #D7E5F4;
}
.buscador-menu li:first-child:hover {
background-color: #EBF2F9;
border-radius: 10px 10px 0 0 !important;
}
.buscador-menu li:first-child:active {
background-color: #D7E5F4;
border-radius: 10px 10px 0 0 !important;
}
.buscador-menu li:last-child:hover {
background-color: #EBF2F9;
border-radius: 0 0 10px 10px !important;
}
.buscador-menu li:last-child:active {
background-color: #D7E5F4;
border-radius: 0 0 10px 10px !important;
}
JS
var input = document.getElementById("input-buscador");
var div = document.getElementById("div-buscador");
var iconoBorrar = document.getElementById("icono-buscador-borrar");
var resultadosLista = document.getElementById("resultados-lista");
//Función para mostrar el icono borrar cuando hay al menos un caracter ingresado
en el input
function mostrarIconoBorrar() {
if (input.value.length > 0) {
iconoBorrar.style.display = "block";
resultadosLista.style.display = "block";
} else {
iconoBorrar.style.display = "none";
resultadosLista.style.display = "none";
}
}
//Función que borra el contenido al presionar el icono con la cruz
function borrarContenido() {
iconoBorrar.style.display = "none";
resultadosLista.style.display = "none";
input.value = "";
}
