jQuery Autocomplete - Dica

Veja nesta dica como utilizar a função jQuery Autocomplete para oferecer sugestões de preenchimento (auto completar) em campos de texto em páginas web.

O recurso de auto completar é muito comum e encontrado com frequência em formulários web, onde os próprios browsers se encarregam de coletar algumas informações de preenchimento de dados e usá-las para oferecer facilidades ao usuário posteriormente.

Geralmente os browsers armazenam dados como email ou login, endereços e outros campos e quando o usuário precisa preencher o mesmo formulário ou um formulário semelhante, as informações que foram usadas anteriormente são apresentadas como opção de escolha rápida em um menu suspenso. Assim, o usuário é poupado de preencher tudo novamente.

Porém, como esse é um recurso do browser, o desenvolvedor não tem o controle desejado sobre ele e, por exemplo, não pode oferecer ao usuário as opções que ele desejar para um determinado campo.

Por exemplo, em um formulário de uma aplicação web há um campo denominado Esporte que o usuário deve preencher com o esporte de preferência do cliente. Como são vários os esportes possíveis, seria interessante oferecer algumas opções padrão, tais como os esportes mais comuns, para que o usuário possa selecionar em um menu suspenso sem precisar digitar o nome completo da modalidade.

jQuery Autocomplete

A biblioteca jQuery UI, construída sobre a tão conhecida jQuery, oferece uma forma simples para se montar opções de autocomplete em campos de texto. Basta montar (ou obter de uma página externa) uma lista com as opções e passar como parâmetro para a função autocomplete(), a chamando a partir do input selecionado.

Para utilizar essa função, primeiramente importe os arquivos das bibliotecas jQuery e jQuery UI na sua página, utilizando para isso o código da Listagem 1.

Listagem 1: Importando os arquivos da jQuery UI.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Em seguida, insira um input do tipo text e defina seu id, por exemplo, como é feito na Listagem 2.

Listagem 2: Criando o input que receberá o autocomplete>,/
<input type="text" id="esporte" placeholder="Informe um esporte"/>

Feito isso, agora é só criar a lista de esportes (opções do auto completar) e chamar a função autocomplete() em uma tag script, utilizando a sintaxe jQuery. Observe na Listagem 3 como isso é feito.

Listagem 3: Ativando o autocomplete.
<script> $(function() { var esportes = [ "Natação", "Futebol", "Vôlei", "Basquete" ]; $("#esporte" ).autocomplete({ source: esportes }); }); </script>

Ao abrir a página no browser e digitar um texto que esteja contido em uma das opções oferecidas, o recurso de autocomplete será ativado, como mostra a Figura 1.


Figura 1: Autocomplete ativo

Esta é apenas uma das formas de oferecer o recurso de auto completar, também é possível obter a lista a partir de um arquivo JSON ou XML, por exemplo. Para obter maiores detalhes sobre esta função, visite a documentação oficial em http://jqueryui.com/autocomplete. E para ver este exemplo em funcionamento.

RUN

Links Úteis

  • O que é Vue.js?:
    Neste curso aprenderemos o que é o Vue.js, um dos frameworks JavaScript que mais vem crescendo nos últimos anos.
  • JPA: Como usar a anotação @GeneratedValue:
    Nesta documentação você aprenderá a utilizar a anotação @GeneratedValue, a qual deve ser declarada quando a geração do valor da chave-primária é de responsabilidade do banco de dados.
  • Aquecendo no Lazy Load:
    Neste DevCast conversaremos sobre o Lazy Load, sua utilidade e analisaremos alguns casos reais de uso. Por fim, veremos um código de exemplo com HTML, CSS e jQuery.

Saiba mais sobre jQuery ;)

  • Validação de formulários com jQuery:
    A validação é um processo fundamental para garantir a integridade dos dados submetidos na aplicação.
  • O que é jQuery?:
    Neste curso conheceremos a jQuery, biblioteca JavaScript que facilita e agiliza a construção de scripts para o client-side possibilitando uma melhor usabilidade ao usuário.

Artigos relacionados