jsf - PrimeFaces p :autoComplete: Show number of all results

Question

在我的 Web 应用程序中，我有一些输入值，用户应该从现有的大型列表(>2000 个项目)中选择一个项目。对于这么多项目，常规的 p:selectOneMenu 并不适合，因为呈现的 HTML 变得太大。因此，我决定改用 PrimeFaces UI 组件 p:autoComplete。

为了确保快速响应时间，我使用附加属性 maxResults 来限制自动完成组件中的建议数量。 这工作得很好，我看到的唯一问题是，用户可能没有意识到这一事实，即结果可能比建议列表中显示的要多。
例如，用户开始输入，我的完整方法返回 50 个结果，但由于 maxResults 的值，只显示 10 个结果。我想要为用户提供一些可视化效果，显示还找到了 40 个结果。

我有什么想法可以实现这一目标吗？

---

引用文献:PrimeFaces p:autoComplete

Answer 1

我能想到两个选择。

moreText 属性和 component 隐式对象

使用隐式对象组件，您可以简单地读取建议的数量:

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

或者:

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

另请参阅:

• What exactly is #{component} in EL?

OmniFaces 的 resolveComponent

如果您想完全自定义，您可以使用 OmniFaces resolveComponent 。再次，通过已解决的组件，您可以简单地读取建议数量:

<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()}"/>

如果您想在建议列表附近显示文本，您可以合并一些 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>