为自动完成建议列提供标题名称

Question

我正在为多个列使用 primefaces 自动完成组件。

我能够显示多列结果，但我想要每列的标题名称。 http://www.primefaces.org/showcase-labs/ui/autoCompletePojo.jsf 正如您在此演示中看到的，自动建议中有两列名称和图像，

我想为 name 和 image 提供标题名称，这意味着它看起来像这样

Player_Name    Picture    (Header names for columns)

  Messi         (its image) 

我尝试以这种方式使用标题名称，但没有成功

<p:autoComplete value="#{autoCompleteBean.selectedPlayer2}" id="customPojo" completeMethod="#{autoCompleteBean.completePlayer}"  
                        var="p" itemLabel="#{p.name}" itemValue="#{p}" converter="player" forceSelection="true">  
                <p:column>  
                  <f:facet name="header">
            <h:outputText value="Player Image" />
            </f:facet> 

                   <p:graphicImage value="/images/barca/#{p.photo}" width="40" height="50"/>  
                </p:column>  

                <p:column>  
            <f:facet name="header">
            <h:outputText value="Player Name" />
            </f:facet>
            <h:outputText value="#{#{p.name}}" />

                </p:column>  
            </p:autoComplete> 

我还想显示 5 列作为建议，如下所示 演示只有 2 列作为建议，但我有 5 列作为 一个建议，因此它显示所有列，但默认情况下需要 水平滑块。但我不想要那里的滑块，至少 5 列应该不带任何滑块显示。

我怎样才能实现它？

Answer 1

无法在自动完成组件中设置标题

Issue 3567: Column header for autocomplete columns

关于滚动，您应该使用萤火虫查看 id 自动完成打开的对话框并将 overflow-x: hidden; 应用于它

例如在陈列柜中应该是这样的

 #form:customPojo_panel table{
     overflow-x: hidden;
 }

可能需要添加一些其他 css 内容，例如 display: inline-block 或分配 min-width