Autocomplete alinhado com Primefaces 2.2

Programação Java
#1

Olá amigos, eu gostaria de poder abrir um formulario e poder alterar por exemplo o bairro atraves de um autocomplete.

Segue a minha pagina:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="../../principal.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui">

    <ui:define name="principal">
        <p:panel header="Cadastro Endereço">
            <h:form id="frmEndereco">

                <p:ajaxStatus style="width:16px;height:16px;">
                    <f:facet name="start">
                        <h:graphicImage value="../design/ajaxloading.gif" />
                    </f:facet>

                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>

                <p:dataTable var="cep" value="#{tableBean.lazyModel}" paginator="true" rows="10" lazy="true"
                             paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                             rowsPerPageTemplate="5,10,15"
                             selection="#{tableBean.selectedCepEndereco}" selectionMode="single"
                             onRowSelectComplete="cepDialog.show()" onRowSelectUpdate="display">

                    <p:column headerText="C.E.P." sortBy="#{cep.numCep}" filterBy="#{cep.numCep}">
                        <h:outputText value="#{cep.numCep}" />
                    </p:column>

                    <p:column headerText="Descrição" sortBy="#{cep.dscLogradouro}" filterBy="#{cep.dscLogradouro}">
                        <h:outputText value="#{cep.dscLogradouro}" />
                    </p:column>

                    <p:column headerText="Complemento">
                        <h:outputText value="#{cep.dscComplemento}" />
                    </p:column>

                    <p:column headerText="Bairro" sortBy="#{cep.cepBairro.dscBairro}" filterBy="#{cep.cepBairro.dscBairro}">
                        <h:outputText value="#{cep.cepBairro.dscBairro}" />
                    </p:column>

                    <p:column headerText="Cidade" sortBy="#{cep.cepBairro.cepCidade.dscCidade}" filterBy="#{cep.cepBairro.cepCidade.dscCidade}">
                        <h:outputText value="#{cep.cepBairro.cepCidade.dscCidade}" />
                    </p:column>

                    <p:column headerText="Estado" sortBy="#{cep.cepBairro.cepCidade.cepUf.codUf}" filterBy="#{cep.cepBairro.cepCidade.cepUf.codUf}">
                        <h:outputText value="#{cep.cepBairro.cepCidade.cepUf.codUf}" />
                    </p:column>
                </p:dataTable>

                <p:dialog header="Detalhe Endereço" widgetVar="cepDialog" resizable="true" position="500,200"
                          width="600" showEffect="explode" hideEffect="explode">

                    <h:panelGrid id="display" columns="2" cellpadding="4">

                        <h:outputText value="C.E.P.:" />
                        <p:inputMask id="numCep" required="true" size="15" value="#{tableBean.selectedCepEndereco.numCep}" style="font-weight:bold" mask="99.999-999" />

                        <h:outputText value="Descrição:" />
                        <h:inputText id="dscLogradouro" required="true" size="40" value="#{tableBean.selectedCepEndereco.dscLogradouro}" style="font-weight:bold"/>

                        <h:outputText value="Complemento:" />
                        <h:inputText id="dscComplemento" size="40" value="#{tableBean.selectedCepEndereco.dscComplemento}" style="font-weight:bold"/>

                        <h:outputText value="Bairro:" />
[b]AQUI GOSTARIA DE COLOCAR UM AUTOCOMPLETE, ATÉ AI TUDO BEM, MAS COMO TRAGO O BAIRRO PREENCHIDO E "SE" EU MUDAR O BAIRRO GUARDAR O CODIGO?[/b]
                        <h:outputText id="dscBairro" value="#{tableBean.selectedCepEndereco.cepBairro.dscBairro}" style="font-weight:bold"/>

                        <h:outputText value="Cidade:" />
                        <h:outputText id="dscCidade" value="#{tableBean.selectedCepEndereco.cepBairro.cepCidade.dscCidade}" style="font-weight:bold"/>

                        <h:outputText value="Estado:" />
                        <h:outputText id="codUf" value="#{tableBean.selectedCepEndereco.cepBairro.cepCidade.cepUf.codUf}" style="font-weight:bold"/>

                    </h:panelGrid>
                </p:dialog>

            </h:form>
        </p:panel>
    </ui:define>
</ui:composition>
#2