cada site precisa de uma barra de pesquisa através da qual um usuário pode pesquisar o conteúdo de sua preocupação nessa página. Uma barra de pesquisa básica pode ser feita usando apenas HTML, CSS e JavaScript. Algoritmos de busca avançada procuram muitas coisas como conteúdo relacionado e, em seguida, mostra os resultados. O que vamos fazer vai procurar substratos em uma corda.
HTML
nesta secção, vamos escrever a parte HTML do Código. Em HTML, vamos apenas ligar nossas folhas de estilo e nosso arquivo JavaScript., A tag de entrada é usada para a criação da barra de pesquisa e inclui vários atributos como tipo, espaço, nome. Precisamos também de uma lista de itens que irão conter diferentes nomes de animais que nos permitirão procurar animais através disto. As classes e ID usadas nas tags serão definidas na ‘stylesheet’ abaixo.
Saída:
CSS
Apesar de o acima da marca de entrada e a lista ordenada parece bem, ele ainda precisa de algum estilo., Para o estilo de barra de pesquisa, alguma margem e enchimento são adicionados para fazê-lo parecer limpo. As medidas estão em porcentagem de modo que se ajusta quando usado em qualquer tamanho da tela (móvel, Desktop etc). A transição Webkit é usada para alterar a largura da barra de pesquisa quando clicada. A largura inicial da barra de pesquisa é de 30%, mas quando é clicado, ele vai mudar para 70% com uma transição fácil de 0,15 segundos.
saída
depois de adicionar estilo, a nossa página deve ser assim.Nota: Se o estilo da sua página não mudar, certifique-se do estilo.,o ficheiro css está na mesma pasta que o index.galeria.ele ainda está incompleto, pois ainda precisamos do JavaScript para completar a funcionalidade desta barra de pesquisa.
JavaScript
no código HTML da barra de pesquisa, nós demos à entrada um id=”searchbar” e onkeyup nós chamamos, a função “search_animal”. onkeyup chama a função toda vez que uma tecla é lançada no teclado.
primeiro obtemos nossa entrada usando getElementById. Certifique-se de convertê-lo para minúsculas para evitar a sensibilidade do caso durante a pesquisa. Uma lista de documentos é armazenada em X. Isto contém cada lista que tem id=”animais”., Depois que um loop é executado para verificar se o innerHTML de cada documento inclui a sub-estrutura de entrada se não o fizer, a propriedade display é configurada como ‘None’ de modo que seja invisível na extremidade dianteira.
Saída: