Auto completar, tradução para autocomplete, é encontrado nos formulários web, onde os browsers oferecem algumas facilidades ao usuário, apresentado uma lista de opções; que tenham relação com o termo da busca quando ele digita uma palavra ou frase.
Os browsers armazenam endereços, emails ou login além de outros campos e quando for necessário o preenchimento, pelo usuário, desse formulário ou de um formulário parecido, as informações que foram usadas antes serão apresentadas, em um menu suspenso, como opção de escolha que agiliza o processo. Assim, o usuário não precisa preencher tudo novamente.
O desenvolvedor não tem o controle que deseja sobre ele e, por isso, não pode oferecer ao usuário as opções que ele desejar para um determinado campo.
Existe na biblioteca jQuery UI, construída sobre a jQuery, uma forma simples para se montar opções de autocomplete em campos de texto. Isso pode ser feito de duas forma: montar uma lista com as opções, (ou obter de uma página externa) passando como parâmetro para a função autocomplete(), e chamando a partir do input selecionado.
Importe os arquivos das bibliotecas jQuery e jQuery UI na página, como no exemplo abaixo:
<head> <title>JQuery UI - Autocomplete</title> <link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.custom.css" /> <script type= "text/javascript" src= "/js/jquery-1.10.2.js"></> <script type= "text/javascript" src= "/js/jquery-ui-1.10.4.custom.min.js"></script> <script type= "text/javascript> </head>
Insira um input do tipo text, definindo um id.
<div> <label for="tags">Tags: </label> <input type= "text" id="tags" /> </div>
Feito isso criar a lista com os itens para escolha, (opções de auto completar) e chamar a função autocomplete() em uma tag script, utilizando a sintaxe jQuery.
<html>
<head>
<title>JQuery UI - Autocomplete</title>
<link rel="stylesheet" type="text/css" href="/css/ui-lightness/jquery-ui-1.10.4.
custom.css" />
/*Obs. O estilo nesse caso é lightness*/
<script type= "text/javascript" src= "/js/jquery-1.10.2.js"></script>
<script type= "text/javascript" src= "js/jquery-ui-1.10.4.custom.min.js"></script>
<script type= "text/javascript">
<script>
$(function(){
var estados = [
"Minas gerais",
"Sao Paulo",
"Parana",
"Espirito Santo"
];
$("#tags").autocomplete({
source: estados
});
});
</script>
</head>
</body>
</html>
O recurso de autocomplete será ativado, ao se digitar na busca do browser, um texto que tenha uma das opções oferecidas. Ou seja: Os widgets Autocomplete fornecem sugestões enquanto o usuário digita no campo. Faça o teste usando a busca, que está no topo dessa mesma página. Mais exemplos em jQuery Autocomplete view source.
Outras formas de apresentar o recurso de auto completar, podem ser feitas através de um arquivo JSON ou XML.