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>

搜索UI与Facebook搜索相同

2 个答案: