PrimeFaces p:autoComplete：显示所有结果的数量

Question

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

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

有什么想法可以实现吗？

---

参考：PrimeFaces p:autoComplete

Answer 1

我能想到两个选项。

moreText 属性和component 隐式对象

使用隐式对象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

如果您想完全自定义，可以使用OmniFacesresolveComponent。再次使用已解决的组件，您可以简单地阅读建议的数量：

<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>