> For the complete documentation index, see [llms.txt](https://avbravo-2.gitbook.io/trucosjakartaee/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://avbravo-2.gitbook.io/trucosjakartaee/overview/java-server-faces/autocomplete/autocomplete-relacionados-provincia-distrito.md).

# Autocomplete Relacionados con dropdown (Provincia- distrito)

Deseamos seleccionar de un autocomplete que tiene dropdown="true", la provincia y mostrar en otro autocomplete los distritos que pertenecen a esa provincia, en un dropdown.

Un vista como esta![](https://2578941663-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Lc1Wg6ze2c8GK7mFBZX%2F-Lc1WjGeqF4Ig-44ZLgX%2F-Lc1X5x4r-sESIEnM3_M%2Fdris.png?generation=1554820657920238\&alt=media)

## Se crean los autocomplete en new\.xhmtl,view\.xhtml

Se debe colocar

```java
dropdown="true"
minQueryLength="0"
```

y los parametros

```java
<f:attribute name="field" value="provincia"/>
<f:attribute name="fielddropdown" value="true"/>
<f:attribute name="fromstart" value="true"/>
<f:attribute name="fieldminquerylength" value="0"/>
```

```java
   <p:outputLabel value="#{msg['field.provincia']}"/>


                        <p:autoComplete        
                            scrollHeight="250"   
                            size="35" 
                            emptyMessage="#{app['info.nohayregistros']}" 
                            value="#{clienteController.cliente.provincia}"  
                            completeMethod="#{provinciaController.provinciaServices.complete}"    
                            var="p"
                            dropdown="true"
                            minQueryLength="0"
                            required="true"
                            itemLabel="#{p.provincia}"
                            itemValue="#{p}" 
                            forceSelection="true"> 
                            <f:converter binding="#{provinciaConverter}"/>




                            <f:attribute name="field" value="provincia"/>
                            <f:attribute name="fielddropdown" value="true"/>
                            <f:attribute name="fromstart" value="true"/>
                            <f:attribute name="fieldminquerylength" value="0"/>

                            <p:ajax event="itemSelect" listener="#{provinciaController.handleSelect}"
                                    update="form:distrito :form:corregimiento"  />  
                            <f:facet name="itemtip">
                                <h:panelGrid columns="1" cellpadding="5">

                                    <h:outputText value="#{msg['field.provincia']} #{p.provincia}" />


                                </h:panelGrid>
                            </f:facet>
                        </p:autoComplete>  

                        <p:outputLabel value="#{msg['field.distrito']}"/>


                        <p:autoComplete      
                            id="distrito"
                            scrollHeight="250"   
                            size="35" 
                            emptyMessage="#{app['info.nohayregistros']}" 
                            value="#{clienteController.cliente.distrito}"  
                            completeMethod="#{clienteController.completeDistrito}"    
                            var="p"
                            dropdown="true"
                            minQueryLength="0"
                            required="#{true}"
                            itemLabel="#{p.distrito}"
                            itemValue="#{p}" 
                            forceSelection="true"> 
                            <f:converter binding="#{distritoConverter}"/>
                            <f:attribute name="field" value="distrito"/>
                            <f:attribute name="fielddropdown" value="true"/>
                            <f:attribute name="fieldminquerylength" value="0"/>
                            <f:attribute name="fromstart" value="true"/>



                            <p:ajax event="itemSelect" listener="#{distritoController.handleSelect}"
                                    update="form:corregimiento"
                                    />  
                            <f:facet name="itemtip">
                                <h:panelGrid columns="1" cellpadding="5">
                                    <h:outputText value="#{msg['field.distrito']} #{p.distrito}" />


                                </h:panelGrid>
                            </f:facet>
                        </p:autoComplete>  



                        <p:outputLabel value="#{msg['field.corregimiento']}"/>

                        <p:autoComplete   
                            id="corregimiento"
                            scrollHeight="250"   
                            size="35" 
                            emptyMessage="#{app['info.nohayregistros']}" 
                            value="#{clienteController.cliente.corregimiento}"  
                            completeMethod="#{clienteController.completeCorregimiento}"    
                            var="p"
                            dropdown="true"
                            minQueryLength="0"
                            required="#{true}"
                            itemLabel="#{p.corregimiento}"
                            itemValue="#{p}" 
                            forceSelection="true"> 
                            <f:converter binding="#{corregimientoConverter}"/>
                            <f:attribute name="field" value="corregimiento"/>
                            <f:attribute name="fielddropdown" value="false"/>
                            <f:attribute name="fieldminquerylength" value="0"/>
                            <f:attribute name="fromstart" value="true"/>

                            <f:facet name="itemtip">
                                <h:panelGrid columns="1" cellpadding="5">

                                    <h:outputText value="#{msg['field.corregimiento']} #{p.corregimiento}" />


                                </h:panelGrid>
                            </f:facet>
                        </p:autoComplete>
```

## Controller

**ProvinciaServices.Java**

El de provincia que es el principal se puede obtener del Services.

```java
@Stateless
public class ProvinciaServices {

    @Inject
    ProvinciaRepository repository;
List<Provincia> provinciaList = new ArrayList<>();
    public List<Provincia> complete(String query) {
        List<Provincia> suggestions = new ArrayList<>();
          try {
          suggestions=repository.complete(query);
        } catch (Exception e) {
            JsfUtil.errorMessage("complete() " + e.getLocalizedMessage());
        }

        return suggestions;
    }
```

## ClienteController.java

Implementamos el autocomplete filtrando ademàs del query por provincia.idprovincia.

```java
  // <editor-fold defaultstate="collapsed" desc="completeDistrito()>
    public List<Distrito> completeDistrito(String query) {
        List<Distrito> suggestions = new ArrayList<>();

        try {

            query = query.trim();          

            suggestions = distritoRepository.findRegex("distrito", query, true, "provincia.idprovincia", cliente.getProvincia().getIdprovincia(), new Document("distrito", 1));

        } catch (Exception e) {
            JsfUtil.errorMessage("completeDistrito() " + e.getLocalizedMessage());
        }
        return suggestions;
    }  // </editor-fold>
```