Cada sitio web necesita una barra de búsqueda a través de la cual un usuario pueda buscar el contenido de su interés en esa página. Se puede crear una barra de búsqueda básica solo con HTML, CSS y JavaScript. Los algoritmos de búsqueda avanzada buscan muchas cosas, como contenido relacionado, y luego muestran los resultados. El que vamos a hacer buscará substrings en una string.
Usando HTML
En esta sección, escribiremos la parte HTML del código. En HTML, simplemente vincularemos nuestras hojas de estilo y nuestro archivo JavaScript. La etiqueta de entrada se usa para la creación de la barra de búsqueda e incluye varios atributos como tipo, marcador de posición, nombre . También necesitamos una lista de elementos que contengan diferentes nombres de animales que nos permitan buscar animales a través de esto. Las clases y los ID utilizados en las etiquetas se definirán en la hoja de estilo a continuación.
HTML
<!DOCTYPE html> <html> <head> <title> Creating Search Bar using HTML CSS and Javascript </title> <!-- linking the stylesheet(CSS) --> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <!-- input tag --> <input id="searchbar" onkeyup="search_animal()" type="text" name="search" placeholder="Search animals.."> <!-- ordered list --> <ol id='list'> <li class="animals">Cat</li> <li class="animals">Dog</li> <li class="animals">Elephant</li> <li class="animals">Fish</li> <li class="animals">Gorilla</li> <li class="animals">Monkey</li> <li class="animals">Turtle</li> <li class="animals">Whale</li> <li class="animals">Aligator</li> <li class="animals">Donkey</li> <li class="animals">Horse</li> </ol> <!-- linking javascript --> <script src="./animals.js"></script> </body> </html>
Producción:
Usando CSS
Aunque la etiqueta de entrada anterior y la lista ordenada se ven bien, todavía necesita algo de estilo. Para el estilo de la barra de búsqueda, se agregan algunos márgenes y relleno para que se vea limpio. Las medidas son en porcentaje para que se ajuste solo cuando se usa en cualquier tamaño de pantalla (Móvil, Escritorio, etc.). La transición de Webkit se usa para cambiar el ancho de la barra de búsqueda cuando se hace clic. El ancho inicial de la barra de búsqueda es del 30 %, pero cuando se hace clic en ella, cambiará al 70 % con una transición de entrada y salida gradual de 0,15 segundos.
CSS
#searchbar{
margin-left: 15%;
padding:15px;
border-radius: 10px;
}
input[type=text] {
width: 30%;
-webkit-transition: width 0.15s ease-in-out;
transition: width 0.15s ease-in-out;
}
/* When the input field gets focus,
change its width to 100% */
input[type=text]:focus {
width: 70%;
}
#list{
font-size: 1.5em;
margin-left: 90px;
}
.animals{
display: list-item;
}
Salida
Después de agregar Estilo, nuestra página debería verse así.
Nota: si el estilo de su página no cambia, asegúrese de que el archivo style.css esté en la misma carpeta que index.html.
Todavía está incompleto, ya que todavía necesitamos JavaScript para completar la funcionalidad de esta barra de búsqueda.
Usando JavaScript
En el código HTML de la barra de búsqueda, le dimos a la entrada un id=”barra de búsqueda” y al pulsar arriba llamamos a la función “buscar_animal”. onkeyup llama a la función cada vez que se suelta una tecla en el teclado.
Primero obtenemos nuestra entrada usando getElementById . Asegúrese de convertirlo a minúsculas para evitar la distinción entre mayúsculas y minúsculas durante la búsqueda. Una array de documentos se almacena en x. Esto contiene todas las listas que tienen id=”animales”. Después de eso, se ejecuta un ciclo para verificar si el HTML interno de cada documento incluye la substring de entrada; si no es así, la propiedad de visualización se establece en ‘Ninguno’ para que sea invisible en la parte frontal.
Javascript
// JavaScript code
function search_animal() {
let input = document.getElementById('searchbar').value
input=input.toLowerCase();
let x = document.getElementsByClassName('animals');
for (i = 0; i < x.length; i++) {
if (!x[i].innerHTML.toLowerCase().includes(input)) {
x[i].style.display="none";
}
else {
x[i].style.display="list-item";
}
}
}
Producción:
JavaScript es mejor conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede aprender JavaScript desde cero siguiendo este tutorial de JavaScript y ejemplos de JavaScript .
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. Puede aprender HTML desde cero siguiendo este tutorial de HTML y ejemplos de HTML .
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por Kartikaybhutani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA