Para melhorar a experiência do usuário, profissionais front-end costumam buscar formas de automatizar certos preenchimentos de cadastros. Além disso, essas formas de carregamento trazem mais integridade para os dados, diminuindo ou evitando a digitação errada de campos que podem vir a ser usados em busca. Sem dúvida, um dos carregamentos dinâmicos mais usados em cadastros é a busca automática por CEP.

Para este exemplo/tutorial, iremos usar jQuery e HTML.

Carregando o Endereço Dinamicamente pelo CEP

Talvez o mais famoso repositório público para preenchimento de CEP (sem a necessidade de uma integração com os Correios), deve ser o ViaCEP.

A API do ViaCEP possui uma integração com json, que é o que usaremos aqui.

O ViaCEP nos retorno os seguintes dados, com as respectivas chaves:

• “cep”,
• “logradouro”,
• “complemento”,
• “bairro”,
• “localidade”,
• “uf”,
• “unidade”,
• “ibge”,
• “gia”

Para exemplificarmos, vamos usar um formulário HTML simples: (Usaremos a base de estados capturado a partir do GitHub de Cassio Cardoso)

<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!--Formulário-->
<form>
<label for="cep">CEP</label>
		<input id="cep" type="text" required/>
<label for="logradouro">Logradouro</label>
		<input id="logradouro" type="text" required/>
<label for="numero">Número</label>
		<input id="numero" type="text" />
<label for="complemento">Complemento</label>
		<input id="complemento" type="text"/>
<label for="bairro">Bairro</label>
		<input id="bairro" type="text" required/>
<label for="uf">Estado</label>
		<select id="uf">
			<option value="AC">Acre</option>
			<option value="AL">Alagoas</option>
			<option value="AP">Amapá</option>
			<option value="AM">Amazonas</option>
			<option value="BA">Bahia</option>
			<option value="CE">Ceará</option>
			<option value="DF">Distrito Federal</option>
			<option value="ES">Espírito Santo</option>
			<option value="GO">Goiás</option>
			<option value="MA">Maranhão</option>
			<option value="MT">Mato Grosso</option>
			<option value="MS">Mato Grosso do Sul</option>
			<option value="MG">Minas Gerais</option>
			<option value="PA">Pará</option>
			<option value="PB">Paraíba</option>
			<option value="PR">Paraná</option>
			<option value="PE">Pernambuco</option>
			<option value="PI">Piauí</option>
			<option value="RJ">Rio de Janeiro</option>
			<option value="RN">Rio Grande do Norte</option>
			<option value="RS">Rio Grande do Sul</option>
			<option value="RO">Rondônia</option>
			<option value="RR">Roraima</option>
			<option value="SC">Santa Catarina</option>
			<option value="SP">São Paulo</option>
			<option value="SE">Sergipe</option>
			<option value="TO">Tocantins</option>
		</select>
</form>

Agora vamos executar uma função para que no momento após sair do campo CEP, ele faça a busca e preencha os demais campos. Como é no momento após deixar o campo, iremos vincular ao evento focusout.

<script type="text/javascript">
	$("#cep").focusout(function(){
	//Aqui vai o código		
	});
</script>

Agora temos que chamar a API json dentro da nossa função. Para isso, vamos utilizar o comando $.ajax, do jQuery.

Obs. Acompanhe os comentários no código para entender cada linha.

<script type="text/javascript">
	$("#cep").focusout(function(){
		//Início do Comando AJAX
		$.ajax({
			//O campo URL diz o caminho de onde virá os dados
			//É importante concatenar o valor digitado no CEP
			url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
			//Aqui você deve preencher o tipo de dados que será lido,
			//no caso, estamos lendo JSON.
			dataType: 'json',
			//SUCESS é referente a função que será executada caso
			//ele consiga ler a fonte de dados com sucesso.
			//O parâmetro dentro da função se refere ao nome da variável
			//que você vai dar para ler esse objeto.
			success: function(resposta){
				//Agora basta definir os valores que você deseja preencher
				//automaticamente nos campos acima.
				$("#logradouro").val(resposta.logradouro);
				$("#complemento").val(resposta.complemento);
				$("#bairro").val(resposta.bairro);
				$("#cidade").val(resposta.localidade);
				$("#uf").val(resposta.uf);
				//Vamos incluir para que o Número seja focado automaticamente
				//melhorando a experiência do usuário
				$("#numero").focus();
			}
		});
	});
</script>

Simples, não é?

Essa mesma lógica você pode usar para poder dinamicamente diversos outros tipos de dados, inclusive alguns vindo do banco. Se quiser saber mais como usar o Json com PHP e jQuery, assista nosso vídeo tutorial sobre o assunto.

Vamos testar e ver como fica:

Abaixo, você pode ver o código completo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>

<body>
	<!--Importando Script Jquery-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<!--Formulário-->
	<form>
		<label for="cep">CEP</label>
		<input id="cep" type="text" required/>
		<label for="logradouro">Logradouro</label>
		<input id="logradouro" type="text" required/>
		<label for="numero">Número</label>
		<input id="numero" type="text" />
		<label for="complemento">Complemento</label>
		<input id="complemento" type="text"/>
		<label for="bairro">Bairro</label>
		<input id="bairro" type="text" required/>
		<label for="uf">Estado</label>
		<select id="uf">
			<option value="AC">Acre</option>
			<option value="AL">Alagoas</option>
			<option value="AP">Amapá</option>
			<option value="AM">Amazonas</option>
			<option value="BA">Bahia</option>
			<option value="CE">Ceará</option>
			<option value="DF">Distrito Federal</option>
			<option value="ES">Espírito Santo</option>
			<option value="GO">Goiás</option>
			<option value="MA">Maranhão</option>
			<option value="MT">Mato Grosso</option>
			<option value="MS">Mato Grosso do Sul</option>
			<option value="MG">Minas Gerais</option>
			<option value="PA">Pará</option>
			<option value="PB">Paraíba</option>
			<option value="PR">Paraná</option>
			<option value="PE">Pernambuco</option>
			<option value="PI">Piauí</option>
			<option value="RJ">Rio de Janeiro</option>
			<option value="RN">Rio Grande do Norte</option>
			<option value="RS">Rio Grande do Sul</option>
			<option value="RO">Rondônia</option>
			<option value="RR">Roraima</option>
			<option value="SC">Santa Catarina</option>
			<option value="SP">São Paulo</option>
			<option value="SE">Sergipe</option>
			<option value="TO">Tocantins</option>
		</select>
	</form>
	
	<script type="text/javascript">
		$("#cep").focusout(function(){
			//Início do Comando AJAX
			$.ajax({
				//O campo URL diz o caminho de onde virá os dados
				//É importante concatenar o valor digitado no CEP
				url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
				//Aqui você deve preencher o tipo de dados que será lido,
				//no caso, estamos lendo JSON.
				dataType: 'json',
				//SUCESS é referente a função que será executada caso
				//ele consiga ler a fonte de dados com sucesso.
				//O parâmetro dentro da função se refere ao nome da variável
				//que você vai dar para ler esse objeto.
				success: function(resposta){
					//Agora basta definir os valores que você deseja preencher
					//automaticamente nos campos acima.
					$("#logradouro").val(resposta.logradouro);
					$("#complemento").val(resposta.complemento);
					$("#bairro").val(resposta.bairro);
					$("#cidade").val(resposta.localidade);
					$("#uf").val(resposta.uf);
					//Vamos incluir para que o Número seja focado automaticamente
					//melhorando a experiência do usuário
					$("#numero").focus();
				}
			});
		});
	</script>
</body>
</html>