Listar mais de um resultado no input

[Andreia Regina 1]

Boa tarde,

 

Tenho a seguinte situação:

Em um input num formulário digito um CEP para trazer os dados do endereço, no entanto posso ter algumas situações em que me resultará mais de um endereço, ele jogará os dados do ultimo endereço encontrado nos campos do formulário.

Minha dúvida:

Como faço para exibir os resultados em lista, como se fosse um autocomplete?

 

 

1. [Object { resultado=3, cod_endereco="301823", descricao="Rua ", mais...},
2. Object { resultado=3, cod_endereco="305789", descricao="Rua ", mais...},
3. Object { resultado=3, cod_endereco="308388", descricao="Estrada ", mais...}]

 

[Sergio Tomas 16]

Boa tarde Andréia tudo bem?

 

Neste caso você terá que criar uma div com os itens que foram trazidos. Exemplo:

<div class='autocomplete'>
     <ul>
          <!-- AQUI DENTRO SERÁ CARREGADO ESTA LISTA -->
     </ul>
</div>

Ai no seu Javascript no momento do retorno deste objeto que você citou em seu post você irá implementar como o exemplo abaixo:

var autocomplete = document.querySelectorAll(".autocomplete > ul");

var objeto = OBJECT_QUE_RETORNOU_DO_CEP;
for(obj in objeto){
  //cria um elemento LI para ser adicionado no UL da div criada
  var li = document.createElement("li");
  //adiciona o endereço do objeto no conteudo do li
  var textoLi = document.createTextNode(objeto[obj].endereco); 
  li.appendChild(textoLi);

  //adiciona o LI ao ul da div autocomplete
  autocomplete.appendChild(li);
}

Sei que irá surgir dúvidas, estou a disposição para te ajudar.

[Andreia Regina 1]

Boa tarde Sergio, tudo bem?

 

Obrigada pelo retorno.

 

Uma dúvida: onde coloco essa parte aqui?

 

1. <div class='autocomplete'>
2. <ul>
3. <!-- AQUI DENTRO SERÁ CARREGADO ESTA LISTA -->
4. </ul>
5. </div>

Devo tratar como se fosse um autocomplete então?

 

Obrigada novamente