Jsf 搜索界面与Facebook搜索相同

在Facebook搜索中，如何获得带有照片和姓名的搜索，并按人、地点等进行分组。我想使用primefaces实现它

查看Select2的ajax搜索：

因为我使用的是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>