Melhorar a interação do campo de busca de um site permite que as pessoas que usam tal formulário para buscar tenham uma melhor experiência de uso (leia-se: usabilidade). Com pequenos detalhes, um pouquinho de bom-senso e algumas poucas linhas de jQuery, é possível promover efeitos interessante no campo de busca.
Para ficar claro, será abordada a seguinte interação:
- Campo de busca é “populado” com um termo pré-definido;
- Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende;
- Quando o campo perde o foco, se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece;
- Quando o botão é pressionado, caso o valor seja termo pré-definido ou esteja em branco, o form não submete e o foco passa ao campo apropriado.
O formulário de busca
Um exemplo de um formulário simples de busca, que pode ser usado em “sites reais”, profissionalmente, pode ser do tipo:
|
1 2 3 4 |
<form method="get" action="script.php" name="form" id="form"> <input type="text" id="form-input" name="form-input" value="Snippets ou Scripts" /> <input type="submit" id="form-submit" name="form-submit" value="Buscar" /> </form> |
Termo pré-definido
A expressão “termo pré-definido” é mais adequada, já que cada site pede um “label” de indicação diferente, conforme as especificações e necessidades deste. Algumas pessoas preferem o termo “Buscar” ou “Procurar” com um botão de label “OK” ou “Vai”; já alguns sites preferem explicitar a função da busca com algo do tipo “Produtos ou Serviços”, acompanhado de um botão com o label “Buscar” (o que é uma abordagem bem interessante).
De uma maneira ou de outra, é preciso definir que termo será esse. Para nosso exemplo, vamos supor que seja um site voltado a desenvolvimento web e o termo pré-definido será “Snippets ou Scripts“. Vamos criar uma expressão regular simples com uma parte do termo pré definido:
|
1 |
patt = new RegExp('Snippets ou'); |
E por que não colocar a expressão inteira? Também poderia ser feito, mas o “esforço” para identificar o padrão aumenta em relação ao tamanho/complexidade da mesma. Sinta-se à vontade para fazer vários testes.
Melhorando a interação do formulário de busca
A melhora da interação se de duas formas:
- Interção com o campo;
- Interação com o botão;
Interação com o campo
Segundo o planejamento, o que se pretende é “Quando o campo recebe o foco, caso tenha o termo pré-definido, é limpo para a pessoa escrever o que pretende”. A lógica é testar a expressão regular: caso o teste seja positivo, o campo é limpo e recebe o foco para a pessoa escrever. Ao perder o foco, “se o conteúdo for o mesmo do termo pré-definido (ou em branco), este termo reaparece”.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$('#form-input') .focus(function(){ if (patt.test($(this).val())) { $(this).val(''); } }) .blur(function(){ if ($(this).val() == '') { $(this).val('Snippets ou Scripts'); } }); |
Interação com o botão
A interação com o botão também é importante – e, infelizmente, é um ponto esquecido por muitos desenvolvedores. A ideia é, ao se clicar no botão, testar se a expressão “bate” ou o campo está em branco e, caso seja um desses casos, dar o foco no campo.
|
1 2 3 4 5 6 7 |
$('#form-submit').click(function(){ if ((patt.test($('#form-input').val())) || ($('#form-input').val() == '')) { $('#busca-bottom').focus(); return false; // Impede que o form seja submetido } }); |
Não é necessário dar a instrução de limpar o campo no foco porque a peça de script anterior, sobre a interação com o campo, já faz isso.
JavaScript final
Juntando os pedaços de códigos, já devidamente explicados, tem-se o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$('#form-input') .focus(function(){ if (patt.test($(this).val())) { $(this).val(''); } }) .blur(function(){ if ($(this).val() == '') { $(this).val('Snippets ou Scripts'); } }); $('#form-submit').click(function(){ if ((patt.test($('#form-input').val())) || ($('#form-input').val() == '')) { $('#busca-bottom').focus(); return false; // Impede que o form seja submetido } }); |
Conclusão sobre a melhora da interação em formulários de busca
Certamente essas não são as únicas melhorias cabíveis para a melhoria de usabilidade e interação de um formulário de busca simples, mas, certamente, são 2 medidas muito bem-vindas para que a experiência e “agradabilidade” sejam melhoradas.
Poderia haver, por exemplo, uma tooltip com o que se pode encontrar no site e/ou fornecendo algum exemplo de termo; implementar uma solução de autocomplete; ou, ao invés de limpar o campo, apenas selecionar todo o termo para, já digitação, substituí-lo pelo o que está sendo digitado. Depende da necessidade do projeto.
E você, tem alguma dica ou solução interessante para melhorar a interação em formulários de busca?