Barra de pesquisa personalizada com html css e javascript

Barra de pesquisa personalizada com html css e javascript

Criando uma barra de pesquisa com HTML, CSS e JavaScript

Uma barra de pesquisa é um elemento essencial para a maioria dos sites, permitindo que os usuários encontrem rapidamente as informações que procuram.

Neste tutorial, vamos guiá-lo através do processo de criação de uma caixa de busca personalizada usando HTML, CSS e JavaScript.

Código HTML:

Neste exemplo, criamos um formulário com um campo de texto para a pesquisa e um botão de enviar.

O atributo action do formulário especifica a página que processará a pesquisa, enquanto o atributo name do campo de texto define o nome da variável que conterá o termo de pesquisa.

    <form action="#" method="post">

        <label class="campo-label" data-text="">
            
            <input type="text" class="campo-input" placeholder="Pesquisa…">
            <button class="btn-busca" type="submit" value=""><i class="icon icon-search"></i> </button>          
        
        </label>

    </form>

Estilização CSS:

O CSS é usado para estilizar a aparência da barra de pesquisa. Você pode personalizar cores, fontes, bordas, espaçamento e outros aspectos visuais.

.campo-label {
  
  display: block;
  width: 360px;
  background-color: #fff;
  position: relative;
  margin: auto;
  border-radius: 16px;
  overflow: hidden;

}

.campo-label::after {
  
  content: attr(data-text);
  font-size: 1.5em;
  line-height: 0;
  height: 0;
  max-width: 100%;
  font-family: Roboto, Arial, sans-serif;
  border-bottom: 3px solid #007cff;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  user-select: none;
  color: transparent;

}

.campo-input {

  color: #555;
  border: none;
  padding: 0 10px;
  outline: none;
  width: 100%;
  font-size: 1.5rem;
  line-height: 2em;
  font-family: system-ui;
  border-bottom: 3px solid #e2e2e2;
  background-color: transparent;

}

.campo-input:focus { color:#202020; }

.btn-busca { 

  background-color: #ffffff;
  color: #007cff;
  width: 54px;
  border: none;
  font-size: 30px;
  line-height: -15px;
  height: 43px;
  display: block;
  cursor: pointer;
  position: absolute;
  top: 3px;
  right: 0;

}

.btn-busca:hover { color:#555; } 

JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script type="text/javascript">
    
    const campoLabel = document.querySelector(".campo-label"),
        
        textInput = document.querySelector("input[type='text']");
                
        textInput.addEventListener("keyup", event => {
          campoLabel.setAttribute("data-text", event.target.value);
        });

</script>

O JavaScript pode ser usado para adicionar funcionalidades à barra de pesquisa, como:

• Autocompletar: Sugerir termos de pesquisa relevantes enquanto o usuário digita.
• Pesquisa AJAX: Enviar a pesquisa para o servidor sem recarregar a página.
• Validação: Verificar se o usuário digitou um termo de pesquisa válido.

Neste caso vamos usar o efeito de keyup conforme digitamos a barrinha completa de acordo com o texto digitado…

Veja o Resultado baixo!

Barra de pesquisa personalizada

Baixar Código Veja Funcionando

Neste artigo, você aprendeu o passo a passo de como criar uma Barra de pesquisa personalizada com html css e Javascript.

Lembre-se:

• Este é apenas um exemplo básico. Você pode personalizar a aparência e a funcionalidade da sua barra de pesquisa de acordo com suas necessidades.
• Existem muitos recursos e bibliotecas disponíveis para ajudá-lo a criar barras de pesquisa complexas.

Com um pouco de esforço, você pode criar uma caixa de pesquisa personalizada que seja útil, bonita e aprimore a experiência do usuário em seu site.

existem diversas formas de estilizar Barra de pesquisas com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.