Crear su propia barra de búsqueda de autocompletar es más fácil de lo que piensa.
Una barra de búsqueda es un elemento de interfaz de usuario popular que utilizan muchos sitios web modernos. Si está creando un sitio que contiene cualquier tipo de datos, es posible que desee que sus usuarios puedan buscar elementos específicos.
Hay muchas formas de crear una barra de búsqueda. Puede crear barras de búsqueda complejas que devuelvan resultados basados en múltiples filtros, como un nombre o una fecha. Las bibliotecas existentes pueden ayudarlo a implementar una barra de búsqueda sin crearla desde cero.
Sin embargo, también puede crear una barra de búsqueda simple usando JavaScript estándar, que compara la entrada de un usuario con una lista de cadenas.
Cómo agregar la interfaz de usuario para la barra de búsqueda
Su sitio web debe incluir un cuadro de entrada para que sus usuarios ingresen el texto que desean buscar. Una forma de hacer esto es usar una etiqueta de entrada y diseñarla para que parezca una barra de búsqueda.
- Cree una carpeta para almacenar su sitio web. Dentro de la carpeta, cree un archivo HTML llamado índice.html.
- Complete su archivo con la estructura básica de un documento HTML. Si no está familiarizado con HTML, hay muchos Ejemplos de código HTML que puedes aprender para ayudarte a ponerte al día.
<!doctype html>
<idioma html="es-US">
<cabeza>
<título>Barra de búsqueda</title>
</head>
<cuerpo>
<clase div="envase">
<!-- El contenido de la página web va aquí-->
</div>
</body>
</html> - Dentro de la clase de contenedor div, agregue una etiqueta de entrada. Esto permitirá al usuario escribir el texto que le gustaría buscar. Cada vez que ingresen un nuevo carácter, su sitio web llamará a la función de búsqueda(). Creará esta función en pasos posteriores.
El atributo de autocompletar garantiza que un navegador no agregará su propio menú desplegable en función de los términos de búsqueda anteriores.<clase div="envase">
<h2>Buscar países</h2>
<identificación de entrada ="barra de búsqueda" autocompletar="apagado" onkeyup="buscar()" tipo ="texto"
nombre="buscar" marcador de posición ="¿Qué estás buscando?">
</div> - En la misma carpeta que tu índice.html archivo, cree un nuevo archivo CSS llamado estilos.css.
- Complete el archivo con estilo para la página web general y la barra de búsqueda:
cuerpo {
margen: 0;
relleno: 0;
color de fondo: #f7f7f7;
}
* {
Familia tipográfica: "Arial", sans serif;
}
.envase {
relleno: 100px 25%;
pantalla: flexible;
dirección de flexión: columna;
altura de línea: 2rem;
tamaño de fuente: 1.2em;
color: #202C39;
}
#barra de búsqueda {
relleno: 15px;
borde-radio: 5px;
}
aporte[tipo=texto] {
-webkit-transición: ancho 0.15sfacilidad de entrada y salida;
transición: ancho 0.15sfacilidad de entrada y salida;
} - En índice.html, agregue un enlace a su archivo CSS dentro de la etiqueta principal y debajo de la etiqueta del título:
<enlace rel="hoja de estilo" href="estilos.css"> - Abre el índice.html archivo en un navegador web y vea la interfaz de usuario de su barra de búsqueda.
Cómo crear las cadenas de lista para la barra de búsqueda
Antes de que el usuario pueda buscar, deberá crear una lista de elementos disponibles que puedan buscar. Puede hacer esto con una matriz de cadenas. Una cadena es una de las muchas tipos de datos que puede usar en JavaScripty puede representar una secuencia de caracteres.
Puede crear dinámicamente esta lista usando JavaScript, mientras se carga la página.
- Adentro índice.html, debajo de la etiqueta de entrada, agregue un div. Este div mostrará un menú desplegable que contendrá una lista de elementos que coinciden con lo que el usuario está buscando:
<ID de división ="lista"></div> - En la misma carpeta que tu índice.html archivo y estilos.css archivo, cree un nuevo archivo llamado guión.js.
- Adentro guión.js, crea una nueva función llamada loadSearchData(). Dentro de la función, inicialice una matriz con una lista de cadenas. Tenga en cuenta que esta es una pequeña lista estática. Una implementación más compleja tendrá que tener en cuenta la búsqueda a través de conjuntos de datos más grandes.
funcióncargar datos de búsqueda() {
// Datos a utilizar en la barra de búsqueda
dejar países = [
'Australia',
'Austria',
'Brasil',
'Canadá',
'Dinamarca',
'Egipto',
'Francia',
'Alemania',
'EE.UU',
'Vietnam'
];
} - Dentro de loadSearchData() y debajo de la nueva matriz, obtenga el elemento div que mostrará los elementos de búsqueda coincidentes al usuario. Dentro de la lista div, agregue una etiqueta de anclaje para cada elemento de datos en la lista:
// Obtener el elemento HTML de la lista
dejar lista = documento.getElementById('lista');
// Agregue cada elemento de datos como un etiqueta
países.para cada((país)=>{
dejar un = documento.createElement("a");
a.innerText = país;
a.classList.add("elemento de lista");
lista.appendChild (a);
}) - En la etiqueta del cuerpo de índice.html, agregue el atributo de evento onload para llamar a la nueva función loadSearchData(). Esto cargará los datos a medida que se carga la página.
<carga corporal ="cargar datos de búsqueda ()"> - En índice.html, antes de que finalice la etiqueta del cuerpo, agregue una etiqueta de secuencia de comandos para vincular a su archivo JavaScript:
<carga corporal ="cargar datos de búsqueda ()">
<!-- El contenido de su página web -->
<secuencia de comandos src="guión.js"></script>
</body> - En estilos.css, agregue algo de estilo a la lista desplegable:
#lista {
borde: 1px gris claro sólido;
borde-radio: 5px;
bloqueo de pantalla;
}
.listItem {
pantalla: flexible;
dirección de flexión: columna;
texto-decoración: ninguno;
relleno: 5px 20px;
de color negro;
}
.listItem:flotar {
color de fondo: gris claro;
} - Abierto índice.html en un navegador web para ver la barra de búsqueda y la lista de resultados de búsqueda disponibles. La función de búsqueda aún no funciona, pero debería ver la interfaz de usuario que utilizará:
Cómo crear el menú desplegable con resultados coincidentes dentro de la barra de búsqueda
Ahora que tiene una barra de búsqueda y una lista de cadenas para que los usuarios busquen, puede agregar la funcionalidad de búsqueda. A medida que el usuario escribe en la barra de búsqueda, solo se mostrarán ciertos elementos de la lista.
- En estilos.css, reemplace el estilo de la lista para ocultar la lista de forma predeterminada:
#lista {
borde: 1px gris claro sólido;
borde-radio: 5px;
pantalla: ninguno;
} - En guión.js, crea una nueva función llamada search(). Tenga en cuenta que el programa llamará a esta función cada vez que el usuario ingrese o elimine un carácter de la barra de búsqueda. Algunas aplicaciones necesitarán viajes a un servidor para obtener información. En tales casos, esta implementación podría ralentizar su interfaz de usuario. Es posible que deba modificar la implementación para tener esto en cuenta.
funciónbuscar() {
// la función de búsqueda va aquí
} - Dentro de la función de búsqueda(), obtenga el elemento HTML div para la lista. Obtenga también los elementos de la etiqueta de anclaje HTML de cada elemento dentro de la lista:
dejar listaContenedor = documento.getElementById('lista');
dejar listaItems = documento.getElementsByClassName('listItem'); - Obtenga la entrada que el usuario ingresó en la barra de búsqueda:
dejar entrada = documento.getElementById('barra de búsqueda').valor
entrada = entrada.toLowerCase(); - Compare la entrada del usuario con cada elemento de la lista. Por ejemplo, si el usuario ingresa "a", la función comparará si "a" está dentro de "Australia", luego "Austria", "Brasil", "Canadá", etc. Si coincide, mostrará ese elemento en la lista. Si no coincide, ocultará ese elemento.
dejar sin resultados = verdadero;
para (i = 0; i < listaItems.longitud; i++) {
if (!listItems[i].innerHTML.toLowerCase().incluye (entrada) || entrada "") {
listItems[i].style.display="ninguno";
continuar;
}
demás {
listItems[i].style.display="doblar";
sin resultados = FALSO;
}
} - Si no hay ningún resultado en la lista, oculte la lista por completo:
listContainer.style.display = noResults? "ninguno": "bloquear"; - Clickea en el índice.html archivo para abrirlo en un navegador web.
- Comienza a escribir en la barra de búsqueda. A medida que escribe, la lista de resultados se actualizará para mostrar solo los resultados coincidentes.
Uso de una barra de búsqueda para buscar resultados coincidentes
Ahora que sabe cómo crear una barra de búsqueda con selección de cadenas, puede agregar más funciones.
Por ejemplo, puede agregar enlaces a sus etiquetas de anclaje para abrir diferentes páginas según el resultado en el que haga clic el usuario. Puede cambiar su barra de búsqueda para buscar a través de objetos más complejos. También puede modificar el código para que funcione con marcos como React.