Uma caixa de pesquisa para o seu site

Vamos começar com o básico: o HTML da caixa de pesquisa. Um campo de entrada simples com um rótulo e um botão de envio, envolto em um formulário. Tudo isso dentro de uma tag HTML header.

caixa-pesquisa1

O botão de envio e o rótulo são usados apenas se o CSS estiver desativado. O atributo placeholder do campo de entrada é interessante. Ele inclui um texto descritivo que desaparece depois de clicar.

Agora vamos ocultar o rótulo e o botão de envio:

caixa-pesquisa2

O próximo passo é definir o estilo do campo de entrada. Para mostrar o fundo listrado da página através dele, definiremos a cor de fundo do campo de entrada com um valor RGBA. Neste caso, temos branco (255, 255, 255), com 50 por cento de opacidade (0,5). Além disso, uma pequena lupa é incluida como imagem de fundo.

caixa-pesquisa3

Para evitar problemas com navegadores antigos, precisamos replicar esta declaração um pouco antes, mas com uma cor sólida #797979 para imitar o tom.

caixa-pesquisa4

Para adicionar profundidade ao campo de entrada, aplicamos um brilho preto sutil com a propriedade CSS3 box-shadow. Nós não queremos valores de offset. Aqui vamos definir os valores horizontal e vertical como 0 e um raio de desfoque de 11px.

caixa-pesquisa5

Agora vamos cuidar das bordas da caixa de pesquisa. Deixaremos os cantos arredondados com a propriedade CSS border-radius.

caixa-pesquisa6

Precisamos de prefixos para versões mais antigas de navegadores. Com alguns ajustes em width, padding, font-size e color (para os navegadores que não reconhecem o atributo placeholder), teremos o campo de entrada finalizado.

caixa-pesquisa7

Como a interação com o usuário é extremammente importante, o campo deve mudar ao receber o foco. A pseudo-classe :focus resolve isso. Vai reduzir o valor de opacidade da cor RGBA para 0.3 (30%) para torna-la ainda mais clara. Assim, como antes, precisamos de uma cor sólida para os navegadores antigos. Finalmente, definiremos a cor para branco para obter legitimidade ideal ao escrever.

caixa-pesquisa8

Ainda precisamos resolver o problema do estilo do atributo placeholder em navegadores antigos:

caixa-pesquisa9

Os navegadores WebKit (Chrome, Safari, IOS, Android e Firefox) permitem definir diretamente o estilo de cor do atributo placeholder. RGBA é usado novamente para defini-lo como um branco com 60% de opacidade (0.6).

Para os navegadores restantes, precisamos usar Javascript. E vamos resolver com o Modernizr (modernizr.com). Ele verifica a disponibilidade de diferentes funções no navegador, por exemplo, CSS3, e oferece classes CSS e os respectivos objetos Javascript para testar. Basta adicionar o script para a seção <head> da sua página:

caixa-pesquisa10

Agora o script que detecta suporte do navegador ao atributo placeholder e insere o texto Search City. Verificamos com o Modernizr a ausência do atributo placeholder, o que executa o código dentro das chaves.

caixa-pesquisa11

Depois o campo de entrada (com o id igual a sr) é inicialmente preenchido com o texto Search City.

caixa-pesquisa12

Finalmente vem a consulta para controlar a interação com o campo de entrada. Quando o campo recebe o foco, o script verifica se ele tem o valor Search City; neste caso ele é esvaziado. Ao perder o foco (blur) e ser deixado em branco, o valor é redefinido com o valor inicial Search City.

caixa-pesquisa13

O campo de entrada é apenas uma peça do quebra-cabeças. Para melhorar a usabilidade da caixa de pesquisa, os resultados devem aparecer logo que o usuário começa a digitar algo. Vamos incluir essa funcionalidade Autocomplete mais tarde, mas primeiro temos que configurar a lista de resultados: uma simples lista não-ordenada inserida na tag <form>

caixa-pesquisa14

Voltemos ao CSS. Cantos arredondados com border-radius são uma boa:

caixa-pesquisa15

A próxima coisa é uma cor leve RGBA para o fundo (menos 10% de opacidade = 0.1) para revelar uma boa parte do que está atrás. Novamente precisamos que uma cor sólida que o preceda.

caixa-pesquisa16

Para finalizar a lista, vamos especificar as propriedades width e left para posiciona-la diretamente e um pouco recuada sob o campo de entrada. Ambas tem palavra-chave important para substituir os estilos inline do Autocomplete. O resto do posicionamento é tratato por ela.

caixa-pesquisa17

Os <li> contém os resultados de busca. Além da borda superior, que foi desativada com a pseudo-classe :first-child, não há nada de especial.

caixa-pesquisa18

A última coisa a se fazer é atribuir os estilos dos links, cuja finalidade única é definir alguns estilos/atributos para a funcionalidade do Autocomplete (e, portanto, não tem nenhum atributo href). Uma coisa a notar aqui é que vamos definir cursor:pointer para que o cursor mude para o conhecido símbolo da mão, indicando que se trata de um elemento clicável. O resto é apenas CSS padrão.

caixa-pesquisa19

Finalmente, usaremos CSS3 para o estado hover do link. Reduza um pouco a opacidade:

caixa-pesquisa20

Para a funcionalidade Autocomplete, usaremos o jQuery UI, que possui ajustes nativos.
Primeiro, a função é atribuída ao campo de entrada, cujo id é sr.

caixa-pesquisa21

Depois disso, a lista de resultados é posta em ação. A opção appendTo anexa a lista – gerada pelo jQuery – ao <form> inicialmente criado. Como ela também consiste de uma lista não-ordenada, adota o estilo que definimos. Portanto a lista de resultados pode agora ser removida do documento HTML.

caixa-pesquisa22

Outro valor opcional é minLength, que controla quantos caracteres são necessários para acionar o Autocomplete. 0 declara um início imediato. Source, por outro lado, define os dados a serem utilizados – uma matriz que contém os termos de busca em potencial. Como queremos navegar automaticamente para a página que possui o termo selecionado, as URLs também são necessárias. Este encaminhamento automático é tratado pela seguinte parte do script:

caixa-pesquisa23

Mostraremos a lista com os termos de busca disponíveis quando o usuário interagir com a caixa de pesquisa. Um simples clique dispara um evento de pesquisa vazio, que resulta na revelação de toda a lista.

caixa-pesquisa24

Artigo escrito por Christian Krammer (www.cs3files.com) e publicado na Revista W nº 136 pags 54 a 57.

Para baixar os arquivos usados neste tutorial, clique AQUI

Quer aprender mais sobre HTML, CSS3, PHP e tornar-se um Webmaster? Clique na imagem abaixo e saiba como:

treinamento-webmaster.fw

Receba o e-book com dois efeitos de texto em PHOTOSHOP

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.