Autocomplete, load records on demand

Question

I'm using PrimeFaces 3.5. I have an autocomplete and I want on search to load 20 rows, when the user scrols to the bottom to load more 10 results (if any). This is my autocomplete:

<p:autoComplete rendered="#{autoCompleter.hasCompletions}" widgetVar="${id}"
        id="${id}" style="position: relative"
        value="#{autoCompleter.value}"
        completeMethod="#{autoCompleter.suggest}" 
        var="s"
        itemLabel="#{s.name}" 
        itemValue="#{s}"
        converter="#{autoCompleter.converter}" 
        forceSelection="true"
        queryDelay="500"
        scrollHeight="400"
        required="#{required}"
        requiredMessage="#{msgs['label.address.autocompleter.required']}"
        styleClass="#{required ? 'ui-input-required' : ''}"
        maxResults="#{autoCompleter.maxResult}">

        <p:ajax event="change"
                partialSubmit="true"
                update="#{update}"  
                onstart="if(${id}.panel.is(':visible')) return false;"/>

        <p:ajax event="itemSelect"
                partialSubmit="true"
                update="#{update}"/>

        <p:ajax event="blur"
                partialSubmit="true"
                update="#{update}"
                disabled="true"/>

        <ui:insert name="menu">
            <p:column>#{s.name}</p:column>
        </ui:insert>

    </p:autoComplete>

And I have added this javascript to do the loading of the next result chunks:

<p:remoteCommand name="loadNextSettlementsChunk"
                 action="#{autoCompleter.suggest}"
                 update="${id}"     
                 partialSubmit="true"
                 immediate="true"/>

<script type="text/javascript">
    jQuery(function($) {
        $('.ui-autocomplete-panel').bind('scroll', function() {
            if($(this).scrollTop() + $(this).height() >= $(this)[0].scrollHeight) {
                loadNextSettlementsChunk();
            }   
        });
    });
</script>

But instead of loading the next results I'm getting warning message:

Unable to find matching navigation case with from-view-id '/policies/index.xhtml' for action '#{autoCompleter.suggest}' with outcome '[Văleni (Viișoara), Viișoara, Viișoara (Todirești), Viișoara (Vaslui), Viișoara, Viișoara, Viișoara, Viișoara, Viișoara, Viișoara, Viișoara-Moșneni, Viișoara, Viișoara Mică, Viișoara (Păunești), Viișoara (Vidra), Viișoara, Viișoara, Viișoara, Viișoara, Viișoara (Ștefan cel Mare), Viișoara (Târgu Trotuș), Viișoara, Viișoara, Viilor, Valea Viilor, Dealu Viilor, Dealu Viilor (Moșoaia), Dealu Viilor (Poiana Lacului)]' and in the [] brackets are my results. How to fix this to work properly?

Answer 1

The action attribute must point to a method which invokes some business logic and returns either void or a String , but the result of your method suggest is an ArrayList . Therefore, I suggest you to use actionListener instead of action in order to invokes your business logic without navigation page.

<p:remoteCommand name="loadNextSettlementsChunk"
                 actionListener="#{autoCompleter.suggest}"
                 update="${id}"     
                 partialSubmit="true"
                 immediate="true"/>