Question

I have primefaces autocomplete which is fetching values from database.
When I type in characters, I could see rows in autocomplete are sometimes appearing above
<p:autoComplete, it should appear normally below <p:autoComplete.

See below screenshot for reference. How can I resolve this issue?

Primesfaces version 3.1

JSF code

<p:autoComplete value="#{bean.selectedEmployees}"  
 completeMethod="#{bean.employeeList}"  
        var="vs" itemLabel="#{vs.empName}" itemValue="#{vs.empName}"  multiple="true"> 

        <p:column style="width:100%;text-align:center">  
            #{vs.empName} - #{vs.empNumber}  
        </p:column>  
    </p:autoComplete> 

Regards

Update 1

ManagedBean

public List<Schedules> employeeList(String query) {

for(Schedules vs : employees) {  
                if(vs.getEmpName().toLowerCase().startsWith(query.toLowerCase()))  
                    suggestions.add(vs);    
            }
return suggestions;

and in constructor

employees = MyDAO.loadEmployees();

Answer 1

I had the same problem. I believe the reason is when you have a large suggestion list, primefaces sees it can’t fit within the browser boundary if it was displayed downwards, so it just blindly flip the dropdown upwards. (which possibly makes it worse) Try add scrollHeight to limit the dropdown length although I heard scrollHeight also has its own problem