How to show one autocomplete depending on another autocomplete in primefaces ? - autocomplete

Question

I am using two autocomplete components. First one shows all car companies (ex: honda,ford...) and another autocomplete has to show the car models depending on selected car company of first autocomplete. (if I select honda in first autocomplete, second autocomplete should show only honda car models (ex:city,civic ...)).

Answer 1

Shortest example I could come up with:
<h:form>
<p:autoComplete value="#{bean.make}"
completeMethod="#{bean.completeMake}">
<p:ajax event="itemSelect" />
</p:autoComplete>
<p:autoComplete value="#{bean.model}"
completeMethod="#{bean.completeModel}" />
</h:form>
The p:ajax is necessary to call the setter of the make.
And the backing bean (getters/setters) omitted:
#ManagedBean
#ViewScoped
public class Bean
{
private List<String> makes = new ArrayList<String>();
private Map<String, List<String>> makeModelMap = new HashMap<String, List<String>>();
private String make, model;
#PostConstruct
private void init()
{
makes.add("Honda");
List<String> hondaModels = new ArrayList<String>();
hondaModels.add("Civic");
hondaModels.add("City");
makeModelMap.put("Honda", hondaModels);
makes.add("Ford");
List<String> fordModels = new ArrayList<String>();
fordModels.add("T");
fordModels.add("Focus");
makeModelMap.put("Ford", fordModels);
}
public List<String> completeMake(String query)
{
List<String> results = new ArrayList<String>();
for (String s : makes)
{
if (s.toLowerCase().startsWith(query.toLowerCase()))
{
results.add(s);
}
}
return results;
}
public List<String> completeModel(String query)
{
List<String> results = new ArrayList<String>();
for (String s : makeModelMap.get(make))
{
if (s.toLowerCase().startsWith(query.toLowerCase()))
{
results.add(s);
}
}
return results;
}
}