jsf - Facebook検索と同じ検索UI

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>