# Melhorando a interação em formulários de busca

> Aprenda a melhorar interação em formulários de busca web. UX aprimorada, autocomplete, sugestões inteligentes e acessibilidade para search boxes!

URL: https://dpw.dev/javascript/melhorando-interacao-formularios-busca/  
Publicado em: 2010-08-03  
Categoria: javascript  
Tags: jquery, usabilidade  
Autor: Tárcio Zemel

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:

```html
<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:

```javascript
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".

```javascript
$('#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.

```javascript
$('#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:

```javascript
$('#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?

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml