cada sitio web necesita una barra de búsqueda a través de la cual un usuario puede buscar el contenido de su preocupación en esa página. Una barra de búsqueda básica se puede hacer usando HTML, CSS y JavaScript solamente. Los Algoritmos de búsqueda avanzada buscan muchas cosas como contenido relacionado y luego muestran los resultados. La que vamos a hacer buscará subcadenas en una cadena.
HTML
en esta sección, escribiremos HTML parte del código. En HTML, simplemente vincularemos nuestras hojas de estilo y nuestro archivo JavaScript., La etiqueta de entrada se utiliza 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 artículos que contendrán diferentes nombres de animales que nos permitirán buscar animales a través de esto. Las clases y los ID utilizados en las etiquetas se definirán en la hoja de estilos a continuación.
salida:
CSS
aunque la etiqueta de entrada anterior y la lista ordenada se ven bien, todavía necesita un poco 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 cuando se usa en cualquier tamaño de la 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 fácil entrada y salida de 0.15 segundos.
Output
Después de agregar Estilo, nuestra página debería tener este aspecto.
Nota: Si el estilo de su página no cambia, asegúrese de que el estilo.,el archivo css está en la misma carpeta que index.HTML.
todavía está incompleto, ya que todavía necesitamos el JavaScript para completar la funcionalidad de esta barra de búsqueda.
JavaScript
en el código HTML de la barra de búsqueda, le dimos a la entrada un id=»searchbar» y onkeyup llamamos, la función «search_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 sensibilidad de mayúsculas y minúsculas durante la búsqueda. Una matriz de documentos se almacena en x. Esta contiene todas las listas que tienen id = «animals»., Después de eso se ejecuta un bucle para verificar si innerHTML de cada documento incluye la subcadena de entrada si no lo hace, la propiedad display se establece en ‘None’ para que sea invisible en el front-end.
Resultado: