jsf - 搜索 UI 与 Facebook 搜索相同

Question

如何使用照片和姓名进行搜索，并按人、地点等进行分组，就像在 Facebook 搜索中一样。我想使用primefaces来实现它。

Answer 1

查看 Select2 的 ajax 搜索：http: //ivaynberg.github.com/select2/#ajax

Answer 2

因为我使用的是 primefaces，所以我使用 p:panelgrid 和 datatable 来获得我想要的。

 <p:dataGrid id="usersAddedCircle" var="selectedUsers" value="#{circleBean.circleVO.circleHasUsersVOArray}" 
                 columns="3"   emptyMessage="#{msgs['circle.emptyUserList']}">

                <!--    <p:dataTable id="usersAddedCircle"
                        value="#{circleBean.circleVO.circleHasUsersVOArray}"
                        var="selectedUsers" emptyMessage="#{msgs['circle.emptyUserList']}">  -->
                        <p:column>
                           <p:panel>
                           <!-- 
                            <f:facet name="header">
                                <h:outputText value="#{labels['circle.userList.name']}" />
                            </f:facet>
                             -->
                            <p:panelGrid styleClass="noBorders">
                                <p:row>
                                    <p:column rowspan="3" style="width:60px;">
                                        <p:graphicImage
                                            value="http://nnnnnnnn/webcam/upload/#{selectedUsers.firstName}.jpg"
                                            style="width:50px;height:50px" />
                                    </p:column>
                                    <p:column style="width:80%">
                                        <h:outputText value="  " />
                                        <h:outputText value="#{selectedUsers.firstName} #{selectedUsers.lastName}" />
                                    </p:column>
                                    <p:column>
                                        <p:commandLink id="removeStudentFromSchedule"
                                            styleClass="ui-icon ui-icon-closethick"
                                            action="#{circleController.removeSelectedUser}"
                                            update="@form" oncomplete="$('#circleEditForm').show();">
                                            <f:param name="userGUID" value="#{selectedUsers.userGuid}" />
                                        </p:commandLink>
                                    </p:column>
                                </p:row>
                                <p:row>
                                    <p:column>
                                        <h:outputText value="#{selectedUsers.country}" />
                                    </p:column>
                                </p:row>


                            </p:panelGrid>
                            </p:panel>
                        </p:column>
                        </p:dataGrid>