PrimeFaces p:autoComplete: Show number of all results

Question

In my web application I have some input value, where the user is supposed to select an item from a large existing list (>2000 items). For that many items a regular p:selectOneMenu is just not suitable, because the rendered HTML becomes way to large. So I decided to use the PrimeFaces UI Component p:autoComplete instead.

To ensure quick response time I am using the additional attribute maxResults to limit the number of suggestions in the autoComplete component. This works quite well, the only problem I see is, that the user might not be aware of the fact, that there may be more results than shown in the list of suggestions.
So for example the user starts typing and my complete method returns 50 results but only 10 are displayed because of the value of maxResults. What I'd like to have is some visualization for the user that there are 40 more results found.

Any ideas how I may achieve that?

References: PrimeFaces p:autoComplete

Severside in your autocomplete method you can most likely detect this case... You can then from the serverside update e.g. an outputLabel that is above or to the right of the autocomplete and update that with a message.... Not all things have to be solved IN components — Kukeltje, Dec 22 '15 at 14:11
It would be nicer if this was supported by the component. It will keep the xhtml and the backing a lot cleaner. I ended up using OmniFaces. — Jasper de Vries, May 09 '16 at 11:38

score 3 · Accepted Answer · edited May 23 '17 at 11:51

There are a two options I can think of.

`moreText` attribute and `component` implicit object

Using the implicit object component you can simply read the number of suggestions:

<p:autoComplete completeMethod="#{settings.autoCompl}"
                moreText="Total found: #{component.suggestions.size()}"/>

Or:

<p:autoComplete completeMethod="#{settings.autoCompl}"
                moreText="#{component.suggestions.size() - component.maxResults} more..."/>

OmniFaces' `resolveComponent`

If you want to go fully custom you could use OmniFaces resolveComponent. With the resolved component, again, you can simply read the number of suggestions:

<p:autoComplete id="autoComplete" ...>
  <p:ajax event="query" update="found"/>
</p:autoComplete>
<o:resolveComponent name="ref" for="autoComplete"/>
<h:outputText id="found"
              value="Total found: #{ref.suggestions.size()}"/>

If you want to display the text near the suggestion list, you could incorporate some JavaScript:

<p:autoComplete id="autoComplete" ...>
  <p:ajax event="query" update="more"/>
</p:autoComplete>
<o:resolveComponent name="ref" for="autoComplete"/>
<h:panelGroup id="more">
  <h:panelGroup rendered="#{not empty ref.maxResults and
                            ref.suggestions.size() gt ref.maxResults}">
    <script>
      $(document.getElementById('#{ref.clientId}_panel')).append(
        '#{ref.suggestions.size() - ref.maxResults} more...'
      );
    </script>
  </h:panelGroup>
</h:panelGroup>

PrimeFaces p:autoComplete: Show number of all results

1 Answers1

moreText attribute and component implicit object

OmniFaces' resolveComponent

`moreText` attribute and `component` implicit object

OmniFaces' `resolveComponent`