AUI Автоматические поля как теги в liferay6.2

Question

Я показываю данные с помощью автозаполнения успешно, я разделяю все данные с помощью разделителя ','.

Теперь у меня есть требование, чтобы реализовать автозаполнение как Liferay теги для полей, как показано ниже:

ниже мой код:

<aui:script> 
AUI().use('autocomplete-list', 'aui-base', 'aui-io-request', 'autocomplete-filters', 'autocomplete-highlighters', 
function (A) { 
    A.io.request('<%=getEntities%>',{ 
     dataType: 'json', 
     method: 'GET', 
     on: { 
      success: function(event, id, obj) { 

       try { 
        new A.AutoCompleteList({ 
         allowBrowserAutocomplete: 'false', 
         activateFirstItem: 'true', 
         inputNode: '#<portlet:namespace />entitiesNames', 
         resultTextLocator: 'entityName', 
         render: 'true', 
         resultHighlighter: 'phraseMatch', 
         resultFilters:['phraseMatch'], 
         maxResults: 10, 
         queryDelimiter : ',', 
         source:this.get('responseData'), 
         autoLoad:false, 
        }); 
       } catch(e) { 
        alert('not working sudheer: ' + e); 
       } 
      } 
     } 
    }); 
}); 
</aui:script> 

---

Также размещен в форуме Liferay: https://www.liferay.com/community/forums/-/message_boards/message/47095147

Answer 1

В 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> 

В контроллер serveResource() Метод:

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()); 
     }