搜索 UI 与 Facebook 搜索相同 [关闭]答案

【问题标题】：Search UI same as Facebook search [closed]搜索 UI 与 Facebook 搜索相同 [关闭]
【发布时间】：2012-08-02 07:25:17
【问题描述】：

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

【问题讨论】：

标签： jsf user-interface primefaces

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：