Fill select return ZIP code web service

Question

I am using the example of the site viacep for when the user enters the zip code is filled in the other data of the address, however I would like the state through a select to be filled automatically. The example shows it being filled in an input.

https://viacep.com.br/exemplo/javascript/

My javascript

    //Pessoa 
    function limpa_formulário_cep() {
    //Limpa valores do formulário de cep.
    document.getElementById('frm:tabForm:logradouro').value=("");
    document.getElementById('frm:tabForm:complemento').value=("");
    document.getElementById('frm:tabForm:bairro').value=("");
    document.getElementById('frm:tabForm:cidade').value=("");
    document.getElementById('frm:tabForm:estadoEndereco').value=("");
    }function meu_callback(conteudo) {if (!("erro" in conteudo)) {
    //Atualiza os campos com os valores.
    document.getElementById('frm:tabForm:logradouro').value=(conteudo.logradouro);
    document.getElementById('frm:tabForm:complemento').value=(conteudo.complemento);
    document.getElementById('frm:tabForm:bairro').value=(conteudo.bairro);
    document.getElementById('frm:tabForm:cidade').value=(conteudo.localidade);
    document.getElementById('frm:tabForm:estadoEndereco').value=(conteudo.uf);

} //end if.
else {
    //CEP não Encontrado.
    limpa_formulário_cep();
    alert("CEP não encontrado.");
}
}

function pesquisacep(valor) {

//Nova variável "cep" somente com dígitos.
var cep = valor.replace(/\D/g, '');

//Verifica se campo cep possui valor informado.
if (cep != "") {

    //Expressão regular para validar o CEP.
    var validacep = /^[0-9]{8}$/;

    //Valida o formato do CEP.
    if(validacep.test(cep)) {

        //Preenche os campos com "..." enquanto consulta webservice.
        document.getElementById('frm:tabForm:logradouro').value="...";
        document.getElementById('frm:tabForm:complemento').value=("...");
        document.getElementById('frm:tabForm:bairro').value="...";
        document.getElementById('frm:tabForm:cidade').value="...";
        document.getElementById('frm:tabForm:estadoEndereco').value="...";


        //Cria um elemento javascript.
        var script = document.createElement('script');

        //Sincroniza com o callback.
        script.src = '//viacep.com.br/ws/'+ cep + '/json/?callback=meu_callback';

        //Insere script no documento e carrega o conteúdo.
        document.body.appendChild(script);

    } //end if.
    else {
        //cep é inválido.
        limpa_formulário_cep();
        alert("Formato de CEP inválido.");
    }
} //end if.
else {
    //cep sem valor, limpa formulário.
    limpa_formulário_cep();
    }
};

My xhtml. The state select I bring from the database

<p:fieldset legend="Endereço">
                    <p:panelGrid styleClass="noGridBorder">
                        <p:row>
                            <p:column />

                        </p:row>
                        <p:row>
                            <p:column>
                                <p:outputLabel value="CEP" for="cep" />
                            </p:column>
                            <p:column>
                                <p:inputMask id="cep" label="CEP" size="9" maxlength="9"
                                    required="true" requiredMessage="O campo CEP é obrigatório."
                                    value="#{pessoaBean.pessoaEndereco.cep}"
                                    onblur="pesquisacep(this.value);" mask="99999-999" />
                            </p:column>
                            <p:column>
                                <p:outputLabel value="Logradouro" for="logradouro" />
                            </p:column>
                            <p:column colspan="5">
                                <p:inputText id="logradouro" onkeyup="alteraMaiusculo()"
                                    required="true" label="Logradouro" size="95"
                                    requiredMessage="O campo Logradouro é obrigatório."
                                    value="#{pessoaBean.pessoaEndereco.logradouro}" />
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column>
                                <p:outputLabel value="Número" for="numero" />
                            </p:column>
                            <p:column>
                                <p:inputMask id="numero" label="Número" size="10"
                                    maxlength="10" required="true"
                                    requiredMessage="O campo Número é obrigatório."
                                    value="#{pessoaBean.pessoaEndereco.numero}"
                                    mask="9?999999999999" />
                            </p:column>

                            <p:column>
                                <p:outputLabel value="Bairro" for="bairro" />
                            </p:column>
                            <p:column>
                                <p:inputText id="bairro" onkeyup="alteraMaiusculo()"
                                    required="true" label="bairro" size="24"
                                    requiredMessage="O campo Bairro é obrigatório."
                                    value="#{pessoaBean.pessoaEndereco.bairro}" />
                            </p:column>

                            <p:column>
                                <p:outputLabel value="Cidade" for="cidade" />
                            </p:column>
                            <p:column>
                                <p:inputText id="cidade" onkeyup="alteraMaiusculo()"
                                    required="true" label="Cidade" size="24"
                                    requiredMessage="O campo Cidade é obrigatório."
                                    value="#{pessoaBean.pessoaEndereco.cidade}" />
                            </p:column>

                            <p:column>
                                <p:outputLabel value="Estado" for="estadoEndereco" />
                            </p:column>
                            <p:column>
                                <p:selectOneMenu id="estadoEndereco" required="true"
                                    requiredMessage="O campo Endereço/Estado é obrigatório."
                                    value="#{pessoaBean.pessoaEndereco.estado.idEstado}">
                                    <f:selectItems value="#{pessoaBean.listaEstados}" />
                                </p:selectOneMenu>
                            </p:column>

                        </p:row>
                        <p:row>
                            <p:column>
                                <p:outputLabel value="Complemento" for="complemento" />
                            </p:column>
                            <p:column colspan="3">
                                <p:inputText id="complemento" onkeyup="alteraMaiusculo()"
                                    label="Complemento" maxlength="30" size="55"
                                    value="#{pessoaBean.pessoaEndereco.complemento}">
                                </p:inputText>
                            </p:column>

                            <p:column>
                                <p:outputLabel value="Ponto de Ref." for="pr" />
                            </p:column>
                            <p:column colspan="3">
                                <p:inputText id="pr" onkeyup="alteraMaiusculo()"
                                    label="Ponto de Referência" size="50"
                                    value="#{pessoaBean.pessoaEndereco.pontoReferencia}">
                                </p:inputText>
                            </p:column>
                        </p:row>
                    </p:panelGrid>
                </p:fieldset>

Answer 1

I think it is unnecessary to have a table only for states, an Enum would solve, after all there are 26 states and a federal district = 27 objects. (It’s just an opinion)

This is a way to solve without javascript, with primefaces ajax

 <p:inputMask id="cep" label="CEP" size="9" maxlength="9"
  required="true" requiredMessage="O campo CEP é obrigatório."
  value="#{pessoaBean.pessoaEndereco.cep}"
   onblur="pesquisacep(this.value);" mask="99999-999">
       <p:ajax event="blur" update="estadoEndereco" listener="{pessoaBean.buscaCep}"/>
  </p:inputMask>

Class that searches in Webservice

 public CepWebService(String cep) {

    try {
        URL url = new URL("http://cep.republicavirtual.com.br/web_cep.php?cep=" + cep + "&formato=xml");

        Document document = getDocumento(url);

        Element root = document.getRootElement();

        for (Iterator i = root.elementIterator(); i.hasNext();) {
            Element element = (Element) i.next();

            if (element.getQualifiedName().equals("uf")) {
           Aqui vc poderia fazer a busca do estado como quer
                setEstado(element.getText());
            }
            if (element.getQualifiedName().equals("cidade")) {
                setCidade(element.getText());
            }
            if (element.getQualifiedName().equals("bairro")) {
                setBairro(element.getText());
            }
            if (element.getQualifiedName().equals("tipo_logradouro")) {
                setTipoLogradouro(element.getText());
            }
            if (element.getQualifiedName().equals("logradouro")) {
                setLogradouro(element.getText());
            }
            if (element.getQualifiedName().equals("resultado")) {
                setResultado(Integer.parseInt(element.getText()));
            }
        }

    } catch (Exception e) {
        e.printStackTrace();
    }
}

I use in production and never gave problem https://github.com/danniel20/CepServiceWeb