AUI Auto fields as the tags in liferay6.2

Question

I am displaying data using auto-complete successfully, I am separating each data by using ',' delimiter.

Now I have a requirement to implement the auto-complete like Liferay Tags for the fields as shown below:

the below is my code :

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

---

Also posted in Liferay forum: https://www.liferay.com/community/forums/-/message_boards/message/47095147

Answer 1

In jsp page:

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

In Controller serveResource() method:

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