Javascript AUI自动字段作为liferay6.2中的标记

我正在使用自动完成成功显示数据，我正在使用“，”分隔符分隔每个数据

现在，我需要为字段实现类似Liferay的自动完成标记，如下所示：

以下是我的代码：

jsp页面中的

：

    <portlet:resourceURL var="resourceURL"></portlet:resourceURL>

<aui:layout>
    <aui:column columnWidth="20"   cssClass="lableAlignMent">
    <label class="nameLable">Role names</label>
    </aui:column>
    <aui:column columnWidth="65" cssClass="auto-fields-text-field">
    <aui:input name="ListOfRoles" id="ListOfRoles" label="" type="hidden"/>
    <aui:input name="ListOfRolesNames" id="ListOfRolesNames" label="" type="hidden"/>
    <div id="<portlet:namespace/>rolesDiv" style="">
    <aui:input name="roleNames" id="roleNames" title="Enter role names" placeholder="Role name"/>
    </div>
    </aui:column>
 </aui:layout>

<aui:script>
        var flag = true ;
        var rolesBoxList;
        AUI().ready('aui-textboxlist-deprecated', function(A) {

        try{
            var roles = selectRoles();
            rolesBoxList = new A.TextboxList({
            contentBox: '#<portlet:namespace />rolesDiv',
            input:'#<portlet:namespace />roleNames',
            dataSource: roles,
            matchKey: 'name',
            schema: {
                resultFields: ['key', 'name']
            },
            queryMatchContains:true
            }).render();
        }catch(e){
        //alert('roles'+e);
        }

        function selectRoles(){
            var jsonArray = [];     
            try{            
                var url = '<%=resourceURL%>';

                jQuery.ajax({
                    type: 'POST',  
                    url:'<%=resourceURL%>',
                    data: {
                        <portlet:namespace />cmd:'roles',
                    },
                    dataType:'json',
                    method:'post',          
                    success: function(msg) {                                        
                        try{
                            var jsonArrayTemp=msg.objJsonArray;                         
                            for(var i=0;i < jsonArrayTemp.length ;i++ ){                                
                                jsonArray.push([jsonArrayTemp[i][0],jsonArrayTemp[i][1]]);
                            }               
                        }catch(exception){
                            alert(exception);                   
                        }
                    }

                });     

            }catch(exception){
            //alert(exception);     
            }   
            return jsonArray ;
        }
</aui:script>

Role roleObj=null;
        if (cmd.equals("roles")) {
            JSONObject objJsonObject = JSONFactoryUtil.createJSONObject();
            JSONArray objJsonArray = JSONFactoryUtil.createJSONArray();
            System.out.println("IN serve resource roles...");
            ThemeDisplay themeDisplay = (ThemeDisplay) resourceRequest
                    .getAttribute(WebKeys.THEME_DISPLAY);
            List orgTypeRoleCategoriesList = null;
            try {
                orgTypeRoleCategoriesList = AttributeLocalServiceUtil
                        .getOrganizationTypeRoleCategories(themeDisplay
                                .getLayout().getGroup().getOrganizationId());
            } catch (Exception e) {
                System.out.println("Exception raised while getting org roles:"
                        + e.getMessage());
            }
            Iterator orgTypeRoleCategoriesObjList = orgTypeRoleCategoriesList
                    .iterator();
            while (orgTypeRoleCategoriesObjList.hasNext()) {
                Object[] objectArray = (Object[]) orgTypeRoleCategoriesObjList
                        .next();
                JSONArray childJsonArray = JSONFactoryUtil.createJSONArray();
                try {
                    roleObj=RoleLocalServiceUtil.getRole(Long.valueOf((String) objectArray[0]));
                } catch (NumberFormatException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (PortalException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                } catch (SystemException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
                childJsonArray.put(roleObj.getRoleId());
                childJsonArray.put(roleObj.getTitle(themeDisplay.getLocale()));
                objJsonArray.put(childJsonArray);
            }

            objJsonObject.put("objJsonArray", objJsonArray);
            System.out.println("objJsonObject:...." + objJsonObject);
            resourceResponse.getWriter().print(objJsonObject.toString());
        }